Docker部署nginx+vue项目并运行

一、打包VUE项目

　　

npm run build:prod

 二、编写default.conf 文件

server {
        listen       80;
        server_name  localhost; 

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/share/nginx/html;
                  try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }


        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }

三、编写Dockerfile文件

# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER hy
# 删除nginx 默认配置
RUN rm /etc/nginx/conf.d/default.conf
# 添加我们自己的配置 default.conf 在下面
ADD default.conf /etc/nginx/conf.d/
# 把刚才生成dist文件夹下的文件copy到nginx下面去
COPY dist/  /usr/share/nginx/html/

四、将以上文件全部移到服务期同一目录下

五、创建镜像

docker build -t xxx .    //xxx为自定义镜像名称

六、运行镜像的一个容器

docker run -d -p 80:80 --name xxx xxx  //8086是宿主机端口 80是容器内端口

七、查看是否运行成功

docker ps -a |grep xxx

 

八、我们每次改完代码 需要先把之前的容器停了 然后又要重新buid run 比较麻烦 ，所以我们可以写一个脚本

#!/bin/bash
sudo docker stop xxx  //xxx  容器名称
sudo docker rm xxx //xxx  容器名称
sudo docker build -t xxx .  //xxx  镜像名称
sudo docker run -d -p 80:80 --name xxx xxx    //xxx容器 xxx镜像

直接执行./xx.sh就行了