腾讯云服务器配置Nginx实践

参考文章：nginx配置ssl证书实现https

通过配置nginx可以实现的功能：

• nginx配置网站路径(指定服务器文件路径为网站路径)
• nginx配置反向代理(指定服务的特定路径代理到其他网站路径)
• nginx配置ssl证书实现https

下面是我的服务器上的nginx完整配置

使用nginx配置实现的效果为：

• 网站地址使用https协议
• 可以使用域名…/zhaoyj.work直接访问服务
• 访问【域名+特定路径】可以访问服务器的vue项目…/zhaoyj.work/wzd_h5
• 在vue项目中可以请求其他域名http://travel.enn.cn的接口，不会出现跨域问题。

配置文件结构

|-- usr
    |-- local
        |-- nginx
            |-- conf
            |   |-- nginx.conf
            |   |-- vhost
            |       |-- proxy.conf
            |       |-- ssl.conf
            |   |-- ssl
            |       |-- 1_www.zhaoyj.work_bundle.crt
            |       |-- 2_www.zhaoyj.work.key

一、修改/usr/local/nginx/conf路径下的nginx.conf

....
http {
	....
    include       vhost/*.conf;
    server {
        # listen       80;
        # server_name  localhost;
        # location / {
        #    root   html;
        #    index  index.html index.htm;
        # }
    }     
}

二、添加自定义nginx的config文件

在/usr/local/nginx/conf路径下新建vhost文件夹

在/usr/local/nginx/conf/vhost下新建proxy.conf、ssl.conf文件

1. 编辑proxy.conf文件

server{
    listen 80;
    server_name zhaoyj.work;   #改成自己的域名
    rewrite ^(.*)$ https://$host$1 permanent;
}

2. 编辑ssl.conf文件

server{
    # 参考：https://blog.csdn.net/Xeon_CC/article/details/92407534
    listen 443;
    server_name zhaoyj.work;	#改成自己的域名
    ssl on;
    ssl_certificate     ssl/1_www.zhaoyj.work_bundle.crt;  #改成自己的证书名称
    ssl_certificate_key ssl/2_www.zhaoyj.work.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   /data/spring/admin;
      index  index.html index.htm;
    }
    location /wzd_h5 {
      root   /data/vue;
      index  index.html index.htm;
    }
    location ^~/api/ {
      proxy_pass http://travel.enn.cn/;
      add_header Access-Control-Allow-Origin *;
    }
}

三、添加ssl证书

在/usr/local/nginx/conf路径下新建ssl文件夹

在/usr/local/nginx/conf/ssl下添加下载好的ssl->Nginx证书

nginx配置问题说明

1.nginx配置更新

使用source /usr/local/nginx/conf/nginx.conf命令一直报错，最后才发现source是更新系统配置的所以会报错。

正确的命令是：

检查nginx配置是否正确nginx -t

刷新nginx配置nginx -s reload

2.nginx配置ssl证书

1.只需要修改框中的前两项即可

2.nginx代理配置需要放在ssl证书配置下面

3.ssl.conf和proxy.conf需要同时存在。即443端口的server和80端口的server都需要配置。

3.ssl->Nginx证书

使用的是腾讯云申请的免费的ssl证书

4.vue项目中跨域问题配置

4.1在本地开发过程中：

• 配置vue.config.js如下：

devServer{
	proxy: {
      // 配置跨域
      '/api': {
        target: 'http://travel.enn.cn',
        // ws:true,
        changOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
      // 配置ICome的跨域
      '/iCome': {
        target: 'https://laiu8.cn',
        // ws:true,
        changOrigin: true,
        pathRewrite: {
          '^/iCome': '/'
        }
      }
	}
}

• 在env.development.js中配置接口域名：

baseApi='/api'

• 对个别域名不同的接口可以在api中单独处理

export function loginByUserName(mobile) {
  return request({
    baseURL: '/iCome',
    url: `index/permission?mobile=${mobile}`,
    method: 'get'
  })
}

4.2在正式打包时，在env.production.js中配置接口域名：

baseApi='/api'