基于Docker用nginx部署vue项目

2020年4月13日 13:12 by wst

node

---

Docker部署vue项目

前奏

开发完node程序之后，如果想部署，有很多种方法，比如：

1. 编译之后，把生成的dist用nginx部署；

2.或者直接在Docker中部署；

 

理想的方法

直接在Docker中编译并直接部署，为了实现这个效果需要先拉取node镜像，然后安装nginx服务，并启动。

完整的Dockerfile文件如下：

FROM node:8.17.0
WORKDIR /usr/src/app
COPY debian.tsinghua.source.txt .
RUN cat /usr/src/app/debian.tsinghua.source.txt > /etc/apt/sources.list
RUN apt update && apt install nginx -y

COPY package*.json ./
RUN npm install --registry=https://registry.npm.taobao.org
COPY . .
RUN npm run build:prod && cp -r dist/* /usr/share/nginx/html/ && cp nginx/default.conf /etc/nginx/conf.d/default.conf

CMD ["nginx", "-g", "daemon off;"]

 

依赖文件：

nginx/default.conf -- nginx配置文件, 请根据自己的情况进行修改。

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log;
    error_log  /var/log/nginx/error.log;

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

    location /nyg/ {
        rewrite /nyg/(.*) /nyg/$1 break;
        proxy_pass http://jh-api.bigdata.infinities.com.cn;
    }

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

debian.tsinghua.source.txt -- 使用163的源安装nginx更快

deb http://mirrors.163.com/debian/ stretch main non-free contrib
deb http://mirrors.163.com/debian/ stretch-updates main non-free contrib
deb http://mirrors.163.com/debian/ stretch-backports main non-free contrib
deb-src http://mirrors.163.com/debian/ stretch main non-free contrib
deb-src http://mirrors.163.com/debian/ stretch-updates main non-free contrib
deb-src http://mirrors.163.com/debian/ stretch-backports main non-free contrib
deb http://mirrors.163.com/debian-security/ stretch/updates main non-free contrib
deb-src http://mirrors.163.com/debian-security/ stretch/updates main non-free contrib

package*.json -- 配置文件

说明: 这些package开头的文件为vue项目创建和构建时自动生成的文件.

 

---