VUE 项目 nginx部署

原创已于 2023-09-28 15:23:27 修改 · 699 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nginx

于 2023-09-04 10:51:22 首次发布

文章详细介绍了如何在Nginx中配置HTTP和SSL服务，包括前端Vue项目的反向代理设置，以及如何通过腾讯或阿里宝塔获取并应用SSL证书。

nginx配置http服务

server {
       listen       80;  # 监听的端口号
       server_name  xxxxxxx;  # 服务器的ip或者域名

       #charset koi8-r;

       #access_log  logs/host.access.log  main;
	
	  # 前端服务反向代理配置
       location / {
           proxy_http_version 1.1;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           root /root/baker/vue-recruit/dist;  # dist目录在服务器的完整路径
           index index.html index.htm;
       }
       
      # 后端服务反向代理配置
       location /api {
           proxy_http_version 1.1;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_pass http://xxxxxxx:9999/;  # 后端服务所部署的服务器地址以及端口号
       }
}

nginx配置ssl证书

server
{
    listen      443 ssl;
    server_name xxxxxxx; 
    ssl_certificate  certxxxx.pem;
    ssl_certificate_key cert/xxxxxx.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_http_version 1.1;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           root /www/spider/backend-admin/dist;  # dist目录在服务器的完整路径
           index index.html index.htm;
       }
      
         location /api {
         proxy_http_version 1.1;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_pass http://127.0.0.1:xxxx;  # 后端服务所部署的服务器地址以及端口号
     }

}

ssl证书通过腾讯或者阿里，宝塔申请就行，下载下来配置

Nginx反向代理部署前端Vue项目_can_chen的博客-优快云博客