使用docker在服务器上部署Vue前端项目

使用docker在服务器上部署Vue前端项目

1，将vue项目打包

#安装
npm install
#打包
npm run build
注：具体打包命令要看vue项目根目录下package.json文件中怎么定义
比如下图，则打包命令为
npm run build:prod

2，将项目传递至gitee

git add .
git commit -m "ok"
git push origin master

3, 在服务器中下载项目到本地

git clone https: //XXXXXXXXXXXXXXXXXXXXX

4,编写default.conf 文件，并上传到 dist同级目录下

server {
        listen       80;
        server_name  ip;

        #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;
        }
    }

5，编写Dockerfile文件，并上传到 dist同级目录下

# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER xxm
# 删除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/

6，在三个文件的上级目录下执行命令创建镜像（注意后面的点不可以省略）

docker build -t project-vue .

7，启动容器

docker run -d --name project-vue -p 8080:80 project-vue

8， 查看容器是否启动成功

docker ps

9，浏览器中访问测试：

http://xxxxx:8080

10：遇到的问题：
（1）：
解决办法 systemctl restart docker（重新启动docker）