Docker部署Vue项目实践

02-20· 2分钟

最近有一个私有化部署项目的需求。由于不能提前确定后端地址，所以服务地址需要可配置，于是想到了使用docker。

分析

后端地址在docker启动时通过环境变量参数传入，在nginx配置中读取，并反向代理给项目。

代码

首先准备好两份nginx配置。

nginx.conf 添加了gzip压缩等功能，根据需求可选。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# user www-data;
worker_processes  auto;
# error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    # access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;
    
 ...
    
 # Gzip Settings
 gzip on;
 gzip_vary on;
 gzip_proxied expired no-cache no-store private auth;
 gzip_comp_level 5;
 gzip_buffers 4 16k;
 gzip_http_version 1.1;
 gzip_types application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd-php text/plain text/javascript text/css image/jpeg image/gif image/png;
 gzip_disable   "MSIE [1-6]\.";
    
 ...
    
 include /etc/nginx/conf.d/*.conf;
}

nginx.template 用来配置具体网站代理。${SERVER} 参数即为传入的docker环境变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
upstream httpd{
 server ${SERVER};
 keepalive 1;
}

server {
 listen       80;
 server_name  _;

 location / {
  root   /usr/share/nginx/html;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
 }
 location ^~ /api/ {
  proxy_pass http://httpd/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
}

现在我们来处理docker部分。

Dockerfile如下，使用envsubst命令将环境变量传给文件。

1
2
3
4
5
6
7
8
9
10
11
12
FROM nginx:stable-alpine

COPY ./dist /usr/share/nginx/html
COPY ./docker/nginx.conf /etc/nginx/nginx.conf

RUN rm /etc/nginx/conf.d/default.conf
COPY ./docker/nginx.template /etc/nginx/conf.d
# ENV SERVER x.x.x.x:8000 // 默认服务器地址

EXPOSE 80
WORKDIR /etc/nginx/conf.d
ENTRYPOINT envsubst '${SERVER}' < nginx.template > web.conf && nginx -g 'daemon off;'

测试

打包镜像

1
docker build -t web .

运行

1
docker run -d -p 80:80 -e SERVER=x.x.x.x:8000 web

打开浏览器访问 localhost:80 ，网站运行成功。

参考

Docker Desktop WSL 2 backend

Docker启动nginx并读取环境变量

envsubst——将环境变量传递给文件

如何在 Docker 容器中连接到本地主机

dockerVue