代码模板

http://git.itcast.cn/development/project-template/tree/master/docker/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%A1%B9%E7%9B%AE

步骤

第一步：确认编译后的静态文件位置

  1. FROM nginx:alpine
  2. LABEL maintainer="研究院研发组 research-maint@itcast.cn"
  3. COPY ./dist /usr/share/nginx/html
  4. COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf
  5. EXPOSE 80

其中 dist 是前端 npm run build 后的成品目录

第二步：修改 api 转发地址

  1. server {
  2.     listen 80;
  4.     root /usr/share/nginx/html;
  6.     location / {
  7.         try_files $uri $uri/ /index.html;
  8.     }
  9.     location ^~ /api/ {
  10.         rewrite ^/api/(.*)$ /$1 break;
  11.         proxy_pass http://119.29.223.100:5000;
  12.         # proxy_set_header   X-Forwarded-Proto $scheme;
  13.         # proxy_set_header   Host              $http_host;
  14.         # proxy_set_header   X-Real-IP         $remote_addr;
  15.     }
  16. }

location ^~ /api/，api 是你的前端代码网络请求基地址
proxy_pass http://119.29.223.100:5000; 是你的实际 API 请求地址

第三步：docker 打包&运行

docker build -t itcast/hmwx-app-h5:v1 .
docker run --rm -d -p 80:80/tcp itcast/hmwx-app-h5:v1
docker run --restart=always -d -p 8100:80/tcp itcast/hmwx-app-h5:v1

阿里云镜像服务

如果需要 docker 镜像仓库，可以考虑阿里的镜像服务仓。
https://cr.console.aliyun.com/cn-hangzhou/instances/repositories