nginx配置SSL证书，将http的域名请求转成https，nginx镜像部署VUE项目

1. 一、配置
• 1.1 配置 SSL 证书
• 1.2 将 http 的域名请求转成 https
2. 二、 nginx 镜像部署 VUE 项目

一、配置

1.1 配置 SSL 证书

server {

 #SSL 默认访问端口号为 443
 listen 443 ssl;

 #请填写绑定证书的域名
 server_name cloud.tencent.com; 

 #请填写证书文件的相对路径或绝对路径
 ssl_certificate  cloud.tencent.com_bundle.crt; 

 #请填写私钥文件的相对路径或绝对路径
 ssl_certificate_key cloud.tencent.com.key; 
 ssl_session_timeout 5m;
 #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
 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 / {
   #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。 
   #例如，您的网站主页在 Nginx 服务器的 /etc/www 目录下，则请修改 root 后面的 html 为 /etc/www。
   root html;
   index index.html index.htm;
 }
}

栗子：

# 平台管理后台
server {
  listen 443 ssl;
  server_name admin.xxx.com.cn;
  ssl_certificate   cert/admin.xxx.com.cn.pem;
  ssl_certificate_key  cert/admin.xxx.com.cn.key;
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;

  location ~ .* {
    proxy_pass http://localhost:8006;
    proxy_http_version 1.1;    
      proxy_set_header Upgrade $http_upgrade;    
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_connect_timeout 30000s;
    proxy_send_timeout 30000s;
    proxy_read_timeout 30000s;
  }
}

1.2 将 http 的域名请求转成 https

server {
    listen 80;
    server_name your_domain.com; #请填写绑定证书的域名
    return 301 https://$host$request_uri; #把 http 的域名请求转成 https
}

二、 nginx 镜像部署 VUE 项目

default.conf

server {
    listen       8006;
    listen  [::]:8006;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;
    location  /{
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 解决单页面应用中 history 模式不能刷新的 bug
        try_files $uri $uri/ /index.html;
        error_page 405 =200  http://$host$request_uri;
    }
   location /admin-api/ {
          proxy_pass   http://xxx:3000; # 将/api/开头的 url 转向该域名
        #如果报错则使用这一行代替上一行 proxy_pass   http://localhost:8000;  将/api/开头的 url 转向该域名
          rewrite "^/admin-api/(.*)$" /webapi/$1 break ; # 最终 url 中去掉/api 前缀
       }

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

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ .php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ .php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /.ht {
    #    deny  all;
    #}
}

流水线置：node.js 构建

cnpm install
cnpm run build:test

dockerfile： 镜像构建

FROM nginx
RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/