vuejs使用docker自动编译部署 docker部署vscode

docker部署vuejs

vuejs项目上线主要有两个步骤：编译（npm run build获取dist文件夹）+ nginx静态文件服务。使用docker部署vuejs目前来说主要有两种方式：一、开发机器编译得到dist文件夹后将文件夹复制到docker nginx服务器，二、将编译和nginx静态服务一并在docker容器中实现。

编译和nginx服务分离

第一种方式有利亦有弊，好处是这样构建的docker镜像相对轻量，启动速度快。弊端是如果将项目分享给他人，接手的人需要搭建node+npm环境（当然熟悉前端的同学觉得这环境的安装再简单不过了）

docker中实现编译+服务

这篇文章将针对第二种docker部署vuejs方式进行讲解，学会了第二种方式，第一种也就是手到擒拿了！

1. 创建vuejs示例项目

vue create docker-vue

这个项目创建过程全程默认即可

2. 配置nginx

docker-vue根目录创建nginx文件夹

• nginx/nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  10240;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

• nginx/vhost/docker-vue.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /var/www/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

}

3. 创建Dockerfile

docker-vue根目录创建Dockerfile,内容如下

FROM alpine

RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories \
    && apk update \
    && apk add nodejs \
    && apk add npm  \
    && apk add nginx

WORKDIR /etc/nginx

COPY ./nginx/nginx.conf .

COPY ./nginx/vhost ./conf.d

WORKDIR /var/www/html

COPY ./public ./public

COPY ./src ./src

COPY ./babel.config.js .

COPY ./package.json .

CMD  npm config set registry https://registry.npm.taobao.org \

&& chmod -R 777 . \

&& NODE_ENV=build npm install \

&& npm run build \

&& echo "docker-vue打包完成" \

&& nginx -g "daemon off;"

4. 构建docker-vue镜像

在Dockerfile所在目录打开命令行执行

docker build -t docker-vue:v1 .

docker run -p 80:80 --name docker-vue docker-vue:v1

效果

访问

http://localhost