Nginx同一域名部署多个前后端分离项目

猪猪猪猪猪猪 發表於 2022-9-13 23:35:00

Nginx同一域名部署多个前后端分离项目

可以参考的链接：https://blog.csdn.net/sinat_17775997/article/details/123060957
<h3 id="1-nginx下单项目原配置只截取server部分">1. nginx下单项目原配置（只截取server部分）</h3>
nginx.conf
<pre><code class="language-shell"> server {
listen 80;
 #填写绑定证书的域名
server_name www.student.top;

#把http的域名请求转成https
#rewrite ^(.*)$ https://$host$1 permanent;
return 301 https://$host$request_uri;
}

server {
 #SSL 访问端口号为 443
 listen 443;
ssl on;
 #填写绑定证书的域名
 server_name www.student.top;
 #证书文件名称
 ssl_certificate www.student.top_bundle.crt;
 #私钥文件名称
 ssl_certificate_key www.student.top.key;
ssl_session_timeout 5m;
#请按照以下协议配置
 ssl_protocols TLSv1.2 TLSv1.3;
#请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
#charset koi8-r;
 #access_loglogs/host.access.logmain;

location / {
#配置前端所在目录
root /home/user/server/dist;
indexindex.html index.htm;
#防止刷新出现404
try_files $uri $uri/ /index.html;
}

#反向代理配置,api,因为前端用/api代替了下面的地址,localhost可以填ip
location /api/ {
proxy_pass http://localhost:9090/;
}
}
</code></pre>
<h3 id="2-vue打包压缩配置">2. vue打包压缩配置</h3>
首先，找到vue.config.js文件下的module.exports，添加如下配置：
<pre><code class="language-js">module.exports = {
publicPath:'/lab/',

//...省略其它内容
}
</code></pre>
找到router文件下的index.js，添加如下配置：
<pre><code class="language-js">const router = createRouter({
base:"/lab/",

//...省略其它内容
})
</code></pre>
然后使用<code>npm run build</code>打包项目，形成dist文件，将dist文件上传到云服务器<code>/home/user/weixin/</code>目录下。
最后，修改nginx的配置nginx.conf，修改后配置如下：
<pre><code class="language-shell">server {
listen 80;
 #省略，没改变，和原配置一样。
}

server {
#SSL 访问端口号为 443
listen 443;

#省略，没改变，和原配置一样。

#主要添加部分，添加在原配置后面即可。
location /lab {
 #配置前端所在目录
 alias /home/user/weixin/dist;
 index index.html index.htm;
 #防止刷新出现404
 try_files $uri $uri/ /lab/index.html;
 }

location /weixin/ {
 proxy_pass http://localhost:9092/;
}
}
</code></pre>
注意：使用alias而不是root，<code>try_files $uri $uri/ /lab/index.html;</code>而不是<code>try_files $uri $uri/ /index.html;</code>。
完成，使用https：+域名+/lab，访问。
参考：https://cnblogs.com/qdlhj/p/15305205.html
<h2 id="nginx子域名部署实现部署多个前后端分离项目">Nginx子域名部署实现部署多个前后端分离项目</h2>
nginx.conf与上一原配置一样。
<h3 id="1配置子域名">1.配置子域名</h3>
<h4 id="添加-cname-记录">添加 CNAME 记录</h4>
以下是阿里云做示例，无论是啥服务商，打开域名解析界面即可
进入到域名解析界面
<img src="https://img-blog.csdnimg.cn/img_convert/bd465c5cd3bc540d9f52ce6277a540dd.png" alt="img" loading="lazy">
点击添加记录
<img src="https://img-blog.csdnimg.cn/img_convert/33a1ea46a5bf5e2e0d6a253f73353e82.png" alt="img" loading="lazy">
配置说明 
CNAME记录
什么情况下会用到CNAME记录？
［如果需要将域名指向另一个域名，再由另一个域名提供ip地址，就需要添加CNAME记录］ 
最常用到CNAME的情况包括：做CDN，配置子域名
<img src="https://img-blog.csdnimg.cn/img_convert/270e63272181513473a2a4ccfee351ef.png" alt="img" loading="lazy">
CNAME记录的添加说明
<ul>
<li>
记录类型：选择 CNAME
</li>
<li>
主机记录：填子域名（比如需要添加 lab.student.top的解析，只需要在主机记录处填写 lab即可；如果添加 student.top的解析的解析，主机记录直接留空，系统会自动填一个“@”到输入框内）。
</li>
<li>
解析线路：默认即可（如果不选默认会导致部分特定用户无法解析；在上图中的作用为：除了联通用户之外的所有用户都可正常解析）
</li>
<li>
记录值：CNAME 指向的域名，只可以填写域名（建议写完整一点，腾讯云就必须是后面那种完整的，比如www.student.top），记录生成后会自动在域名后面补一个“.”，这是正常现象。
</li>
<li>
TTL：添加时系统会自动生成，默认为600秒（TTL为缓存时间，数值越小，修改记录各地生效时间越快）。
</li>
</ul>
点击确认即可
<h3 id="2修改-nginx-配置文件">2.修改 Nginx 配置文件</h3>
nginx.conf
<pre><code class="language-shell">#主要添加部分
server {
 listen 80;
 #填写绑定证书的域名
server_name lab.student.top;

location /{
 #配置前端所在目录
 root /home/user/weixin/dist;
 index index.html index.htm;
 #防止刷新出现404
 try_files $uri $uri/ /index.html;
 }

location /weixin/ {
 proxy_pass http://localhost:9092/;
}
}
server {
 listen 80;
 #省略，没改变，和原配置一样。
 }

 server {
 #SSL 访问端口号为 443
 listen 443;
 #省略，没改变，和原配置一样。
}
</code></pre>
注意：使用root而不是alias
完成，使用http：+子域名，访问。
参考：https://blog.csdn.net/weixin_53893220/article/details/122907510、https://blog.csdn.net/weixin_43944305/article/details/124940158
<h3 id="附加内容">附加内容：</h3>
子域名申请好ssl证书后，放在nginx的conf目录下，弄成https请求连接。主要修改nginx配置。
主要方法：通过拷贝一份主域名原有的配置80和443，修改域名部分为子域名。
nginx.conf
<pre><code class="language-shell">server {
 listen 80;
 #填写绑定证书的域名
server_name lab.student.top;

#把http的域名请求转成https
#rewrite ^(.*)$ https://$host$1 permanent;
return 301 https://$host$request_uri;

}

server {
 #SSL 访问端口号为 443
 listen 443;
ssl on;
 #填写绑定证书的域名
 server_name lab.student.top;
 #证书文件名称
 ssl_certificate lab.student.top_bundle.crt;
 #私钥文件名称
 ssl_certificate_key lab.student.top.key;
ssl_session_timeout 5m;
#请按照以下协议配置
 ssl_protocols TLSv1.2 TLSv1.3;
#请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
#charset koi8-r;
 #access_loglogs/host.access.logmain;

location /{
 #配置前端所在目录
 root /home/user/weixin/dist;
 index index.html index.htm;
 #防止刷新出现404
 try_files $uri $uri/ /index.html;
 }

location /weixin/ {
proxy_pass http://localhost:9092/;
}
}

server {
 listen 80;
 #填写绑定证书的域名
server_name www.student.top;

#把http的域名请求转成https
#rewrite ^(.*)$ https://$host$1 permanent;
return 301 https://$host$request_uri;
}

server {
 #SSL 访问端口号为 443
 listen 443;
ssl on;
 #填写绑定证书的域名
 server_name www.student.top;
 #证书文件名称
 ssl_certificate www.student.top_bundle.crt;
 #私钥文件名称
 ssl_certificate_key www.student.top.key;
ssl_session_timeout 5m;
#请按照以下协议配置
 ssl_protocols TLSv1.2 TLSv1.3;
#请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
#charset koi8-r;
 #access_loglogs/host.access.logmain;

location / {
#配置前端所在目录
root /home/user/server/dist;
indexindex.html index.htm;
#防止刷新出现404
try_files $uri $uri/ /index.html;
}

#反向代理配置,api,因为前端用/api代替了下面的地址,localhost可以填ip
location /api/ {
proxy_pass http://localhost:9090/;
}
}
</code></pre> 
来源：https://www.cnblogs.com/chandol/p/16691401.html

頁: [1]

琼殿技术论坛's Archiver

Nginx同一域名部署多个前后端分离项目