Docker部署nginx和前端项目部署SSL证书实现HTTPS

一、nginx镜像部署(准备工作)

1、创建nginx工作目录

#需要一个conf文件存放目录，和html文件目录,及日志存放目录
1. mkdir -p /mydata/applications/nginx/conf #配置文件
2. mkdir -p /mydata/applications/nginx/html #dist静态文件
3. mkdir -p /mydata/logs #日志
4. mkdir -p /etc/nginx/cert #证书目录

2、 启动nginx容器，如果这个镜像本机中没有，会自动下载镜，我这下载是的1.18版本

docker run --name nginx -p 80:80 -d nginx:1.18.0

3、复制容器中配置文件目录到本机中，然后删除该容器

# 复制配置
docker cp nginx:/etc/nginx/nginx.conf /mydata/applications/nginx/conf/nginx.conf
docker cp nginx:/etc/nginx/conf.d /mydata/applications/nginx/conf/conf.d
docker cp nginx:/usr/share/nginx/html /mydata/applications/nginx/

4、启动新的nginx容器

#携带证书启动nginx
docker run -d \
-p 80:80 \
-p 443:443 \
--name nginx \
--restart=always \
--network-alias nginx \
-e TZ="Asia/Shanghai" \
-v /mydata/applications/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /mydata/applications/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /mydata/logs/nginx:/var/log/nginx \
-v /mydata/applications/nginx/html:/usr/share/nginx/html \
-v /mydata/applications/nginx/cert:/etc/nginx/cert \
nginx:1.18.0

#不携带证书启动
# 创建新的nginx，使用刚才复制出来的配置文件
docker run -p 80:80 --name nginx \
-v /mydata/applications/nginx/html:/usr/share/nginx/html \
-v /mydata/logs/nginx:/var/log/nginx \
-v /mydata/applications/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-d nginx:1.10
# 注意一下这个路径映射到了/usr/share/nginx/html，我们在nginx配置文件中是写/usr/share/nginx/html，不是写 /mydata/applications/nginx/html
# 设置nginx 容器在docker启动的时候启动
docker update nginx --restart=always

5、查看容器后，访问服务器ip地址（检验是否启动成功）

# 查看nginx容器的启动状态是否为UP正在运行状态
docker ps -a   (查所有容器, docker ps 查正在运行容器)

6、访问ip+端口成功

二、使用docker启动nginx部署前端项目

1、将前端打包好的dist目录拷贝到/mydata/applications/nginx/html/ 目录下边如

/mydata/applications/nginx/html/dist

2、修改/mydata/applications/nginx/nginx.conf配置文件如下

#user  nginx;
worker_processes  1;

#error_log  /var/log/nginx/error.log warn;
#pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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;
	server {
		#HTTPS的默认访问端口443。
		#如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
		listen 443 ssl;
		#填写证书绑定的域名
		#server_name  xiestrong.com;
		server_name  localhost;
		#填写证书文件绝对路径
		ssl_certificate      /etc/nginx/cert/xiestrong.com.pem;
		#填写证书私钥文件绝对路径
		ssl_certificate_key   /etc/nginx/cert/xiestrong.com.key;
		
		ssl_session_cache    shared:SSL:1m;
		ssl_session_timeout  5m;
		
		ssl_ciphers  HIGH:!aNULL:!MD5;
		ssl_prefer_server_ciphers  on;
		
		location / {
		  root /usr/share/nginx/html/dist/build/h5;
		  index index.html index.htm;
		}
		location /api {
		  rewrite  ^.+api/?(.*)$ /$1 break;
		  proxy_pass  http://85.145.186.88:8861;    #后端地址
		  proxy_redirect off;
		  proxy_set_header Host $host;
		  proxy_set_header X-Real-IP $remote_addr;
		  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		}
	}
	server {
		listen       80;
		#填写证书绑定的域名
		#server_name  xiestrong.com;
		server_name  localhost;
		
		#将所有HTTP请求通过rewrite指令重定向到HTTPS。
		rewrite ^(.*)$ https://$host$1;
		
		
		location / {
			root   /usr/share/nginx/html/dist/build/h5;
			index  index.html index.htm;
		}
		
		error_page   500 502 503 504  /50x.html;
		location = /50x.html {
			root   html;
		}
	
	}
}

3、修改后保存并退出，重新启动nginx容器

1、先用 [docker ps – a] 命令 找到对应容器ID
2、docker restart [容器ID]

4、查看容器（是否启动成功）

docker ps -a

5、再次访问配置的nginx ip + 端口, 出现前端项目页面即成功,链接也变成是安全的https协议