本文章同适用于前后端分离项目，后端的docker部署详见https://blog.csdn.net/Junior_Liu/article/details/109225303

1. 项目打包前先修改代理信息，例如本文项目对应后端的ip：192.168.137.4:9000

2. npm run build 打包项目，生成dist文件夹

3. 将dist文件夹放在ubuntu下任意文件夹，在同一文件夹下创建Dockerfile

   sudo touch Dockerfile
   

4. 编写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

5. 制作镜像

   sudo docker build -t koyanagi-front:1.0 .
   

   • koyanagi-front 为自定义镜像名，1.0为版本号，. 表示在当前路径下构建镜像

6. 创建并运行容器

   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
   

   参考https://stackoverflow.com/questions/27303967/nginx-403-forbidden-error