Docker 部署 vue 项目

概述

技术栈：docker + vue + nginx

1、docker下载安装 nginx

docker pull nginx

2、创建nginx挂载目录 /usr/local/nginx （可根据自己需要存放文件的位置自行创建目录）

mkdir -p /usr/local/nginx

3、vim 创建default.conf

server {listen       80;server_name  localhost;#charset koi8-r;access_log  /var/log/nginx/host.access.log  main;error_log  /var/log/nginx/error.log  error;location / {root   /usr/share/nginx/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;}
}

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

4、将本地的vue项目进行打包，生成dist目录

npm run build  # 执行该指令后，在项目根目录中生成dist文件夹

5、将dist文件夹压缩并上传到挂载目录中：/usr/local/nginx/

6、进入挂载目录，并解压出dist目录，我们的index.html则在dist目录下：

7、在dist同目录下创建Dockerfile文件，vim Dockerfile:

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY ./default.conf /etc/nginx/conf.d/default.conf

3、启动并挂在nginx

docker run -d -p 80:80 --name nginx -v /usr/local/nginx/dist:/usr/share/nginx/html --restart=always nginx