前端项目部署教程——有域名有证书

一、拉取nginx镜像

docker pull nginx //先拉取nginx镜像

二、打包前端项目

1、将Vue打包项目传输到/usr/local/vue/下blog和admin文件夹下

重点: 每一个子域名都要申请证书，在阿里云每年可以免费申请20个证书，

免费证书申请教程在 免费证书申请教程

2、将申请的证书放到/usr/local/nginx/cert下，如果没有cert目录就建一个

3、在/usr/local/nginx下创建nginx.conf文件，格式如下：

events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;client_max_body_size     50m;client_body_buffer_size  10m; 	  client_header_timeout    1m;client_body_timeout      1m;gzip on;gzip_min_length  1k;gzip_buffers     4 16k;gzip_comp_level  4;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary on;server {listen  443 ssl;server_name  主域名;ssl on;ssl_certificate    /usr/local/nginx/cert/pem文件名称;ssl_certificate_key  /usr/local/nginx/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 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;location / {root   /usr/local/vue/blog;index  index.html index.htm;try_files $uri $uri/ /index.html;}location ^~ /api/ {proxy_pass http://IP地址:端口号/;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  443 ssl;server_name  后台页面子域名;ssl on;ssl_certificate    /usr/local/nginx/cert/pem文件名称;ssl_certificate_key  /usr/local/nginx/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 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;location / {root   /usr/local/vue/admin;index  index.html index.htm;try_files $uri $uri/ /index.html;}location ^~ /api/ {proxy_pass http://IP地址:端口号/;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  443 ssl;server_name  websocket子域名;ssl on;ssl_certificate    /usr/local/nginx/cert/pem文件名称;ssl_certificate_key  /usr/local/nginx/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 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;location / {proxy_pass http://IP地址:端口号/websocket;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; }}server {listen  443 ssl;server_name  文件上传子域名;ssl on;ssl_certificate    /usr/local/nginx/cert/pem文件名称;ssl_certificate_key  /usr/local/nginx/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 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;		location / {		root /usr/local/upload/; }		}	server {listen       80;server_name  主域名;rewrite ^(.*)$	https://$host$1	permanent;}server {listen       80;server_name  后台页面子域名;rewrite ^(.*)$	https://$host$1	permanent;}server {listen       80;server_name  websocket子域名;rewrite ^(.*)$	https://$host$1	permanent;}server {listen       80;server_name  文件上传子域名;rewrite ^(.*)$	https://$host$1	permanent;}}

三、运行启动nginx容器

docker run --name nginx --restart=always -p 80:80 -p 443:443 -d -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/vue:/usr/local/vue -v /usr/local/nginx/cert:/usr/local/nginx/cert -v /usr/local/upload:/usr/local/upload nginx

这样前端项目就已经部署完毕。访问自己的域名即可查看自己部署的项目。