docker上在Nginx上部署前端vue项目并使用HTTPS协议

最新推荐文章于 2024-04-18 21:29:41 发布

菜菜菜菜菜菜菜籽

最新推荐文章于 2024-04-18 21:29:41 发布

阅读量441

点赞数

文章标签： nginx 前端 docker

本文链接：https://blog.csdn.net/weixin_41811352/article/details/130963190

版权

之前发布的vue项目发现一直无法用https协议访问，今天打算尝试一下

1、证书下载

首先在腾讯云上下载对应的ssl证书
在这里插入图片描述

vue项目DockerFile文件制作

1.在放vue项目文件目录创建cert目录，将证书文件放进去
在这里插入图片描述
2、修改Dockerfile文件

FROM nginx
COPY ./console/dist/ /usr/share/nginx/html/console/
COPY ./dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
#拷贝证书文件
COPY /cert/ /usr/share/nginx/cert/

其实就是在原来的Dockerfile文件中添加了一行拷贝证书命令
在这里插入图片描述
3、修改nginx配置文件nginx.conf

#user  nobody;
worker_processes  1;
  
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
  
#pid        logs/nginx.pid;
  
  
events {
    worker_connections  1024;
}
  
  
http {
    include       mime.types;
    default_type  application/octet-stream;
  
    #access_log  logs/access.log  main;
  
    sendfile        on;
    #tcp_nopush     on;
  
    #keepalive_timeout  0;
    keepalive_timeout  65;
  
    gzip on;
	gzip_static on; 
  
    client_max_body_size   20m;
    server {
		#SSL 默认访问端口号为 443
		listen 443 ssl;
		#请填写绑定证书的域名
		server_name wsssc.store; 
		#请填写证书文件的相对路径或绝对路径
		ssl_certificate  /usr/share/nginx/cert/域名_bundle.crt; 
		#请填写私钥文件的相对路径或绝对路径
		ssl_certificate_key /usr/share/nginx/cert/域名.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 / {
		  root   /usr/share/nginx/html/;
		  index  index.html index.htm;
		}
    }
	server {
	 listen 80;
	 #请填写绑定证书的域名
	 server_name 域名; 
	 #把http的域名请求转成https
	 return 301 https://$host$request_uri; 
	}
  
}