文件目录结构

/home/jinzhengba-vue/
├── cert
│   ├── cert.crt
│   └── cert.key
├── default.conf
├── dist
│   └── index.html
└── Dockerfile

Dockerfile

FROM nginx
MAINTAINER jinzhengba
# 设置时区
RUN ["rm","-rf","/etc/localtime"]
RUN ["ln","-sf","/usr/share/zoneinfo/Asia/Shanghai","/etc/localtime"]
# 复制文件
COPY default.conf /etc/nginx/conf.d/default.conf
COPY cert /etc/nginx/cert
COPY dist /etc/nginx/dist
EXPOSE 80 443

default.conf

server {
    listen 80;
    #填写绑定证书的域名
    server_name jinzhengba.com; 
    #把http的域名请求转成https
    return 301 https://$host$request_uri;
    #如果没有ssl证书 把下面location / 和 location /api配置在这里 并删掉下面的server
}
server {
    listen 443 ssl;
    server_name jinzhengba.com; #填写绑定证书的域名
    ssl_certificate /etc/nginx/cert/cert.crt; #证书文件名称
    ssl_certificate_key /etc/nginx/cert/cert.key; #私钥文件名称
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    location / {
        alias /etc/nginx/dist/; # 这里存放前端文件
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    # 配置反向代理
    location /api {
        proxy_ssl_server_name on;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        expires off;
        sendfile off;
        proxy_pass https://xxx.xxx.xxx.xxx:xxx; #后端接口地址
    }
}

部署方式

直接启动容器

docker run -itd \
--name jinzhengba-vue \
--restart always \
-p 80:80 -p 443:443 \
-v /home/jinzhengba-vue/default.conf:/etc/nginx/conf.d/default.conf \
-v /home/jinzhengba-vue/cert:/etc/nginx/cert \
-v /home/jinzhengba-vue/dist:/etc/nginx/dist \
nginx

构建镜像并启动容器

docker build -t jinzhengba/vue .
docker run -itd --name jinzhengba-vue --restart always -p 80:80 -p 443:443 jinzhengba/vue

适用于 云托管 云部署