添加nginx陪孩子

  1. 在项目根目录创建.docker/nginx/conf.d/nginx.conf文件，编辑内容如下
  1. server {
  2.     listen 80;
  3.     server_name localhost; # 配置域名
  5.     location / {
  6.         root html;                          # 配置根目录，html表示默认目录/usr/share/nginx/html
  7.         try_files $uri $uri/ /index.html;   # 配置入口文件
  8.     }
  10.     # 配置后端接口代理
  11.     # location /api {
  12.     #     proxy_set_header Host $http_host;
  13.     #     proxy_set_header  X-Real-IP $remote_addr;
  14.     #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  15.     #     proxy_set_header X-Forwarded-Proto $scheme;
  16.     #     rewrite ^/api/(.*)$ /$1 break; # 重写
  17.     #     proxy_pass http://127.0.0.1:8888; # 设置代理服务器的协议和地址
  18.     # }
  20.     # 配置接口文档
  21.     # location /api/swagger/index.html {
  22.     #     proxy_pass http://127.0.0.1:8888/swagger/index.html;
  23.     # }
  24. }
  1. 在根目录创建Dockerfile文件，编辑内容如下
  1. # 阶段1， 添加node环境，并打包项目
  2. FROM node:16.0.0
  4. WORKDIR /app/
  5. COPY . .
  7. RUN yarn install
  8. RUN yarn build
  10. # 阶段2，添加Nginx服务，并代理我们的前端项目
  11. FROM nginx:alpine
  12. LABEL MAINTAINER debugksir<402351681@qq.com>   # 作者信息
  14. COPY .docker/nginx/conf.d/ /etc/nginx/conf.d/  # 将当前目录下的nginx配置拷贝到容器中的对应位置，nginx将读取这份配置
  15. COPY --from=0 /app/dist /usr/share/nginx/html  # 将阶段1中的打包文件拷贝到nginx代理的目录下
  17. RUN ls -al /usr/share/nginx/html               # 打印代理目标文件列表，验证是否成功
  1. 通过Dockerfile构建镜像
  1. # 切换到项目目录
  2. cd xxx/myapp
  3. # 构建镜像
  4. docker build -t myapp:1.0 .
  1. 通过我们打包的镜像，实例化容器
  1. docker run -d -p 80:80 --name tongue_container myapp:1.0
  2. # -d 后端运行
  3. # -p 配置宿主机与容器端口映射
  4. # -name 给容器命名
  5. # myapp:1.0 镜像命:标签
  1. 通过浏览器访问IP:80验证结果