极简部署

获取报文信息 curl -v localhost:3000
curl: 客户端的url工具

  1. StatusCode        : 200
  2. StatusDescription : OK
  3. Content           : {60, 33, 68, 79...}
  4. RawContent        : HTTP/1.1 200 OK
  5. Connection: keep-alive
  6. Keep-Alive: timeout=5
  7. Content-Length: 275
  8. Date: Sun, 17 Jul 2022 08:48:30 GMT 
  10. <!DOCTYPE html>
  11. <html lang="en">
  13. <head>
  14. <meta charset="UTF-8">
  15. <meta ht...
  16. Headers           : {[Connection, keep-alive], [Keep-Al
  17. ive, timeout=5], [Content-Length, 2
  18. 75], [Date, Sun, 17 Jul 2022 08:48:
  19. 30 GMT]}
  20. RawContentLength  : 275

手写简单服务器

  1. const http = require('node:http')
  2. const fs = require('node:fs')
  4. // const html = fs.readFileSync('./index.html')
  6. const server = http.createServer((req, res) => {
  7.   // 创建一个可读流
  8.   fs.createReadStream('./index.html').pipe(res)
  9. })
  11. server.listen(3000, () => {
  12.   console.log('listening 3000...')
  13. })

image.png

基于 docker/docker-compose 对极简项目的部署

docker从入门到实践

1. 安装Docker Destop

Dockerfile reference
docker build .:在当前目录下构建docker环境，默认以指定路径下的Dockerfile来构建
docker build -f /path/to/a/Dockerfile .：在当前目录下基于指定路径的Dockerfile来构建
了解 Compose file Reference(opens new window)。
了解 Docker Hub(opens new window)

2. WSL2

运行docker destop后根据提示点击链接安装linux内核更新包
安装后后双击运行，之后就可以打开docker

3. Dockerfile

  1. FROM node:14-alpine
  3. # 工作目录
  4. WORKDIR /src
  6. # 将当前项目根目录下的代码复制到镜像的工作目录/src下，注意 . /src之间有空格
  7. ADD . /src
  9. # 运行命令 安装依赖 node:14-alpine镜像包含了npm yarn 但没有pnpm
  10. RUN yarn 
  12. CMD npm start
  14. # 暴露3000端口
  15. EXPOSE 3000

Dockerfile常见命令

  1. # adds “test.txt” to <WORKDIR>/relativeDir/
  2. # 相对路径 相对于构建时指定的context 意思是复制test.txt到镜像的文件系统中的relativeDir/目录下
  3. ADD test.txt relativeDir/

4. 构建镜像

-t 指定镜像名称

  1. docker build -t simple-app .

构建成功查看镜像
docker images
image.png

git rev-parse --short HEAD: 列出当前仓库的 CommitId

5. 运行容器

docker run --rm -p 3000:3000 simple-app：—rm表示当容器停止时自动删除容器
-p: 3000:3000，将容器中的 3000 端口映射到宿主机的 3000 端口，左侧端口为宿主机端口，右侧为容器端口
image.png

修改一下Dockerfile

  1. FROM node:14-alpine
  3. WORKDIR /src
  5. ADD . /src
  6. # 用于调试，列出当前工作目录下的文件
  7. RUN ls -lah
  9. RUN yarn
  11. CMD npm start
  13. EXPOSE 3000

需要运行命令docker build --progress plain --no-cache .才能使RUN ls -lah输出

6. 使用docker-compose

用配置文件的形式替代之前使用命令行的形式
编辑配置文件

  1. version: "3"
  2. services:
  3.   # 镜像名称
  4.   app:
  5.     # build: 从当前路径构建镜像
  6.     build: .
  7.     # 端口映射
  8.     ports:
  9.       - 3000:3000

运行

  1. # up: 创建并启动容器
  2. # --build: 每次启动容器前构建镜像
  3. $ docker-compose up --build

image.png
注意停掉之前相同端口下的服务

基于nginx的镜像

优点：对于静态资源不需要使用node镜像，使用nginx可以大幅减小镜像体积，还有性能上的考虑

image.png

  1. FROM nginx:alpine
  3. # 这个目录 /usr/share/nginx/html/ 下的index.html是nginx默认展示页面
  4. ADD index.html /usr/share/nginx/html/
  1. docker-compose up --build nginx-app

image.png

通过docker-compose学习nignx配置

nginx 镜像会默认将 80 端口暴露出来

  1. # 进入 nginx 的环境当中
  2. $ docker run -it --rm nginx:alpine sh
  4. # 进入容器中，在容器中可通过 exit 退出容器环境
  5. $ exit
  7. # 通过以下一行命令可直接访问 nginx 的默认页面
  8. # -p 3000:80，在本地 3000 端口访问 nginx 页面
  9. $ docker run -it --rm -p 3000:80 nginx:alpine
  11. # nginx 默认配置文件位于 /etc/nginx/conf.d/default.conf
  12. # 查看该文件
  13. # 该命令在 nginx 的容器中执行
  14. $ cat /etc/nginx/conf.d/default.conf

volumes:将主机的数据卷或着文件挂载到容器里。

  1. version: "3"
  2. services:
  3.   learn-nginx:
  4.     image: nginx:alpine
  5.     ports:
  6.       - 4000:80
  7.     volumes:
  8.       - ./nginx.conf:/etc/nginx/conf.d/default.conf
  9.       - .:/usr/share/nginx/html

启动容器

  1. docker-compose -f learn-nginx.docker-compose.yaml up learn-nginx

image.png
image.png

  1. server {
  2.     listen       80;
  3.     server_name  localhost;
  5.     location / {
  6.         root   /usr/share/nginx/html;
  7.         index  index.html index.htm;
  8.         # 以X开头代表自定义头 注意加分号，否则报错
  9.         add_header X-Hello corner;
  10.         add_header X-Server corner;
  12.         # 开启gzip 对应响应头 Content-Encoding: gzip;
  13.         gzip on;
  14.     }
  16.     error_page   500 502 503 504  /50x.html;
  17.     location = /50x.html {
  18.         root   /usr/share/nginx/html;
  19.     }
  20. }

使用dokcer-compose构建并容器

构建一个cra应用

  1. # 创建一个 cra 应用
  2. $ npx create-react-app cra-deploy
  4. # 进入 cra 目录
  5. $ cd cra-deploy
  7. # 进行依赖安装
  8. $ yarn
  10. # 对资源进行构建
  11. $ npm run build

本地将应用跑起来

  1. $ yarn
  2. $ npm run build
  3. $ npx serve -s build

使用dokcer来构建，在项目根目录下新建simple.Dockerfile，内容如下：
使用了构建缓存优化和多阶段构建

  1. FROM node:14-alpine as builder
  3. WORKDIR /code
  5. # 单独分离 package.json，是为了安装依赖可最大限度利用缓存
  6. ADD package.json yarn.lock /code/
  7. RUN yarn
  9. ADD . /code
  10. RUN npm run build
  12. # 选择更小体积的基础镜像
  13. FROM nginx:alpine
  14. COPY --from=builder code/build /usr/share/nginx/html

在项目根目录下新建docker-compose.yaml

  1. version: "3"
  2. services:
  3.   simple:
  4.     build:
  5.       context: .
  6.       dockerfile: simple.Dockerfile
  7.     ports:
  8.       - 4000:80

运行启动容器

  1. docker-compose up --build simple

常用命令

  1. # 使用docker-compose构建镜像
  2. docker-compose up --build
  3. # 列出所有镜像，可以查看各个镜像的体积等信息
  4. docker images 
  5. # 查看当前目录docker-compose配置文件中的镜像信息
  6. docker-compose images