一、部署单个项目
nginx.conf文件默认配置（关键代码）如下：
# user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
# 默认配置
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
目录/usr/local/nginx/html是nginx的默认站点目录。
在部署单个项目时，可以直接将你的项目代码放入html目录中（html目录中的文件清空掉），访问nginx默认的80端口即可。
完整链接为：http://+服务器ip
- vue项目打包完后生成dist目录，只需要将dist中的全部内容放到html目录中就可以
注意：此方法不推荐使用，因为不利于后期项目的添加及影响其他同事（比如后端）的正常工作
二、部署多个项目
在一台服务器上使用nginx部署多个前端项目的方法，目前我掌握的有以下三种：
基于location配置
基于端口配置
基于域名配置
这3种方式项目代码的放置位置相同，仅是nginx.conf文件的配置方式不同。
文件放置位置为/usr/local/nginx/html，如下图：
image.png
1、基于location配置
实现方法
修改nginx.conf中的server
server {
listen 80;
server_name localhost;
# 默认配置
location / {
root html;
index index.html index.htm;
}
# 额外配置
# 项目1
location /bbws {
alias /usr/local/nginx/html/bbws/dist; # alias是别名
index index.html index.htm;
}
# 项目2
location /bbgw {
alias /usr/local/nginx/html/bbgw/dist;
index index.html index.htm;
}
# root与alias主要区别在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。
# root的处理结果是：root路径 ＋ location路径
# alias的处理结果是：使用alias路径替换location路径
# alias是一个目录别名的定义，root则是最上层目录的定义。
# 还有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件的，而root则可有可无。
# 注意：使用这种配置方式的话，项目需要在vue.config.js中配置静态资源的打包路径
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
特点
好处：
- 只有一个server，而且我们也不需要配置二级域名。
缺点：
- img、css、js引入需要使用相对路径。
-
如果是vue项目的话，需要在项目的根目录下找到vue.config.js文件(没有的话自己新建一个)，修改公共路径
修改前：
image.png
修改为：
const path = require('path');
module.exports = {
publicPath:'./', // 公共路径
}
最后重新打包一次，npm run build ，vue3.0打包生产环境资源路径错误问题就解决了。
2、基于端口配置
修改nginx.conf配置文件
# user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
# 默认配置
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# 项目1
server {
listen 33331;
server_name localhost;
location / {
root html/bbws/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# 项目2
server {
listen 33332;
server_name localhost;
location / {
root html/bbgw/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
特点
好处：
- 支持配置多个项目，易于维护
缺点：
- 需要对外开放多个端口
3、基于域名配置（常用）
# user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
# 默认配置
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# 项目1
server {
listen 33331;
server_name ws.bbsw.com;
location / {
root html/bbws/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# 项目2
server {
listen 33331;
server_name gw.bbsw.com;
location / {
root html/bbgw/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
特点
好处：
- 支持配置多个项目，易于维护
- 只需要对外暴露一个端口
4、nginx.conf配置优化
如果所有配置都放到nginx.conf中，这个文件就会比较乱, 也影响管理和阅读。因为nginx 的配置很灵活,支持include配置文件，所以我们可以拆分出来,分成不同的配置文件。
在nginx.conf中通过下面的语句引入：
include /usr/local/nginx/conf/*.conf;
这句话的作用就是可以在nginx启动加载所有 /usr/nginx/conf/ 目录下的 *.conf 文件。 所以，平时我们为了方便管理，可以在此目录下面定义自己的 xx.conf 文件即可。注意，文件类型一定要是conf 。
以3、基于域名配置举例，详细的配置流程如下：
nginx.conf配置：
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
include /usr/local/nginx/conf/*.conf; # 可以在此目录下配置多个.conf文件
}
nginx目录：
image.png
image.png
新增conf文件配置：
# ws.conf文件
# 项目1
server {
listen 33331;
server_name localhost;
location / {
root html/bbws/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# gw.conf文件
# 项目2
server {
listen 33332;
server_name localhost;
location / {
root html/bbgw/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
三、其他
本人也是初学nginx，如果发现有错误，请给予指正。
本文参考：
https://www.cnblogs.com/zhaoxxnbsp/p/12691398.html
https://blog.csdn.net/asahinokawa/article/details/87702491
