本文章同适用于前后端分离项目，后端的docker部署详见https://blog.csdn.net/Junior_Liu/article/details/109225303
项目打包前先修改代理信息，例如本文项目对应后端的ip：192.168.137.4:9000
npm run build 打包项目，生成dist文件夹
将dist文件夹放在ubuntu下任意文件夹，在同一文件夹下创建Dockerfile
sudo touch Dockerfile编写Dockerfile
例如：
FROM nginx:stable-alpine COPY dist/ /usr/share/nginx/html EXPOSE 80 CMD ["nginx","-g","daemon off;"]详细参数： https://blog.csdn.net/qq_29999343/article/details/78318397
制作镜像
sudo docker build -t koyanagi-front:1.0 . koyanagi-front 为自定义镜像名，1.0为版本号，. 表示在当前路径下构建镜像创建并运行容器
sudo docker run -p 8081:80 -d --name koyanagi_front koyanagi-front:1.0 -p 后面跟宿主机端口:Dockerfile里指定的端口，指将容器里项目用的80端口映射到宿主机端口8081，宿主机端口随意一个空闲端口就行–name 后面跟容器名，随意koyanagi-front:1.0 指所用镜像名访问宿主机ip:8081，例如本例：192.168.137.4:8081
注：如果出现nginx 403 Forbidden error页面，首先查看下/usr/share/nginx/html下是否有index.html或index.htm文件。查看命令：
sudo docker exec [容器名] ls /usr/share/nginx/html如果存在，那么就是nginx没有访问该目录的权限。
把nginx的启动用户改成目录的所属用户（容器内的nginx.conf文件无法改动，可以在宿主机新建一个nginx.conf，再通过Dockerfile将nginx.conf复制过去）
或者直接赋予/usr/share/nginx/html文件夹777权限
sudo docker exec [容器名] chmod -R 777 /usr/share/nginx/html附带一份nginx.conf
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; index index.html index.htm; } # 这里配的是生产环境的反向代理地址 location /prod-api/{ proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://39.97.164.xx:9002/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }参考https://stackoverflow.com/questions/27303967/nginx-403-forbidden-error
