前端vue部署到nginx并且配置https安全证书全流程

        说明一下： 本人原本使用的是docker安装nginx通过挂载实现部署，但是出现了很多bug（例如部署安全证书后还是无法访问），所以困扰了很久，最后改为本地安装nginx，最终在不懈的努力下终于按照好了，特此记录一下。

        一：整个流程：

              1. 将前端项目打包，会生成dist文件（同时不要忘了修改调用后台的ip）

              2. 安装nginx（本地安装，非docker），然后将dist下的文件放入nginx的html目录下

              3. 配置nginx的配置文件

              4. 安装证书（ssl）

            安装nginx，ssl参考：https://blog.csdn.net/oYingJie1/article/details/127700897

            下载及安装ssl参考：https://blog.csdn.net/qq_42320934/article/details/120655799

        二： 附上关键代码及说明

                1.nginx的配置文件

2. #user nobody;
3. worker_processes 1;
5. #error_log logs/error.log;
6. #error_log logs/error.log notice;
7. #error_log logs/error.log info;
9. #pid logs/nginx.pid;
12. events {
13. worker_connections 1024;
14. }
17. http {
18. include mime.types;
19. default_type application/octet-stream;
21. #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
22. # '$status $body_bytes_sent "$http_referer" '
23. # '"$http_user_agent" "$http_x_forwarded_for"';
25. #access_log logs/access.log main;
27. sendfile on;
28. #tcp_nopush on;
30. #keepalive_timeout 0;
31. keepalive_timeout 65;
33. #gzip on;
35. server {
36. listen 80;
37. server_name localhost;
38. #将所有HTTP请求通过rewrite指令重定向到HTTPS。
39. rewrite ^(.*)$ https://$host$1;
40. #charset koi8-r;
42. #access_log logs/host.access.log main;
44. location / {
45. root html;
46. index index.html index.htm;
47. }
49. location /undefined/ {
50. proxy_pass http://s11.s100.vip:35053;
51. proxy_redirect default;
52. rewrite ^/undefined/(.*) /$1 break;
53. }
55. #error_page 404 /404.html;
57. # redirect server error pages to the static page /50x.html
58. #
59. error_page 500 502 503 504 /50x.html;
60. location = /50x.html {
61. root html;
62. }
64. # proxy the PHP scripts to Apache listening on 127.0.0.1:80
65. #
66. #location ~ \.php$ {
67. # proxy_pass http://127.0.0.1;
68. #}
70. # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
71. #
72. #location ~ \.php$ {
73. # root html;
74. # fastcgi_pass 127.0.0.1:9000;
75. # fastcgi_index index.php;
76. # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
77. # include fastcgi_params;
78. #}
80. # deny access to .htaccess files, if Apache's document root
81. # concurs with nginx's one
82. #
83. #location ~ /\.ht {
84. # deny all;
85. #}
86. }
91. # another virtual host using mix of IP-, name-, and port-based configuration
92. #
93. #server {
94. # listen 8000;
95. # listen somename:8080;
96. # server_name somename alias another.alias;
98. # location / {
99. # root html;
100. # index index.html index.htm;
101. # }
102. #}
105. # HTTPS server
106. #
107. server {
108. listen 443 ssl;
109. server_name localhost;
111. ssl_certificate cert.pem;
112. ssl_certificate_key cert.key;
114. ssl_session_cache shared:SSL:1m;
115. ssl_session_timeout 5m;
117. ssl_ciphers HIGH:!aNULL:!MD5;
118. ssl_prefer_server_ciphers on;
120. location / {
121. root html;
122. index index.html index.htm;
123. }
125. location /undefined/ {
126. proxy_pass http://s11.s100.vip:35053;
127. proxy_redirect default;
128. rewrite ^/undefined/(.*) /$1 break;
129. }
130. }
132. }

        2. 以前docker配置的文件

2. user nginx;
3. worker_processes auto;
5. error_log /var/log/nginx/error.log notice;
6. pid /var/run/nginx.pid;
9. events {
10. worker_connections 1024;
11. }
14. http {
15. include /etc/nginx/mime.types;
16. default_type application/octet-stream;
18. log_format main '$remote_addr - $remote_user [$time_local] "$request" '
19. '$status $body_bytes_sent "$http_referer" '
20. '"$http_user_agent" "$http_x_forwarded_for"';
22. access_log /var/log/nginx/access.log main;
24. sendfile on;
25. #tcp_nopush on;
27. keepalive_timeout 65;
29. #gzip on;
31. include /etc/nginx/conf.d/*.conf;
33. server {
34. listen 80;
35. listen [::]:80;
36. server_name www.slgstu.top;
37. #将所有HTTP请求通过rewrite指令重定向到HTTPS。
38. # rewrite ^(.*)$ https://$host$1;
39. #access_log /var/log/nginx/host.access.log main;
41. location / {
42. root /usr/share/nginx/html;
43. index index.html index.htm;
44. }
47. location /undefined/ {
48. proxy_pass http://s11.s100.vip:35053;
49. proxy_redirect default;
50. rewrite ^/undefined/(.*) /$1 break;
51. }
54. #error_page 404 /404.html;
56. # redirect server error pages to the static page /50x.html
57. #
58. error_page 500 502 503 504 /50x.html;
59. location = /50x.html {
60. root /usr/share/nginx/html;
61. }
63. # proxy the PHP scripts to Apache listening on 127.0.0.1:80
64. #
65. #location ~ \.php$ {
66. # proxy_pass http://127.0.0.1;
67. #}
69. # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
70. #
71. #location ~ \.php$ {
72. # root html;
73. # fastcgi_pass 127.0.0.1:9000;
74. # fastcgi_index index.php;
75. # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
76. # include fastcgi_params;
77. #}
79. # deny access to .htaccess files, if Apache's document root
80. # concurs with nginx's one
81. #
82. #location ~ /\.ht {
83. # deny all;
84. #}
85. }
87. server {
88. #HTTPS的默认访问端口443。
89. #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
90. listen 443 ssl;
92. #填写证书绑定的域名
93. server_name www.slgstu.top;
95. #填写证书文件名称
96. ssl_certificate cert/www.slgstu.top.cer;
97. #填写证书私钥文件名称
98. ssl_certificate_key cert/www.slgstu.top.key;
100. ssl_session_cache shared:SSL:1m;
101. ssl_session_timeout 5m;
103. # 指定密码为openssl支持的格式
104. ssl_protocols SSLv2 SSLv3 TLSv1.2;
106. ssl_ciphers HIGH:!aNULL:!MD5; # 密码加密方式
107. ssl_prefer_server_ciphers on; # 依赖SSLv3和TLSv1协议的服务器密码将优先于客户端密码
110. location / {
111. root /usr/share/nginx/html;
112. index index.html index.htm;
113. }
114. }
116. }

                3.说明下nginx的文件作用

                        cert：放https证书的两个文件

                        conf： nginx的一些配置文件，主要还是使用nginx.conf

                        html：默认的话nginx会加载html文件下的index.html

                        log：查看成功与错误日志