Nginx部署多个前端项目及相关Linux命令

理工GISer

于 2024-09-11 21:16:58 发布

阅读量1.2k

点赞数 23

文章标签： nginx 前端运维

本文链接：https://blog.csdn.net/honor2/article/details/142150560

版权

Nginx部署多个前端项目

Nginx部署前端项目主要流程：

前端项目打包，生成包含index.html的dist目录。
将dist目录或者目录里内容上传到服务器上（哪里都行。主要在nginx.conf配置文件中将index.html指定正确就行）。
配置nginx.conf。（可以通过nginx -t命令测试配置文件语法是否正确，也可以通过该命令，查看配置文件存储位置）。
完整细节可以参考：前端 - nginx在同一域名下部署多个vue项目 - web开发总结 - SegmentFault 思否
重启nginx服务nginx -s reload。

Nginx部署多个前端项目主要有三种方法：基于域名、基于端口、基于URL。三种不同方法区别在于nginx.conf中server的配置，接下来将描述三种方法的server配置。

基于域名

server {
    listen 80;
    server_name project1.example.com;

    location / {
        root /usr/html/project1;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

server {
    listen 80;
    server_name project2.example.com;

    location / {
        root /usr/html/project2;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

基于端口

server {
    listen 8081;
    server_name example.com;

    location / {
        root /usr/html/project1;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

server {
    listen 8082;
    server_name example.com;

    location / {
        root /usr/html/project2;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

基于URL（重点介绍）

server{
    listen 88;#Nginx将监听服务器的88端口，确定防火墙已经开放此端口。
    server_name localhost;#定义了 Nginx 服务器的域名
    #location定义求路径的处理规则
    location / {# 匹配http://服务器IP:88/
        root /usr/html/dist;#指定静态文件的根目录路径，Nginx 会根据请求的 URI 从该目录提供文件
        # history模式
        try_files $uri $uri/ /index.html;
        index index.html;
    }
    location /demos {#匹配http://服务器IP:88/demos/
        alias /usr/html/demo-collection/;
        index index.html;
    }
}

/usr/html/dist/index.html

/usr/html/demo-collection/index.html

详细介绍下

root与alias的区别
- root 指令设置的是请求 URI 的基础路径，它与 location 后的路径拼接在一起
- alias 指令是替换整个请求的路径为指定的路径，不会再与 location 后的路径拼接。
try_files $uri $uri/ /index.html;
- 对于单页应用（只有一个index.html，多页跳转效果由router完成），并且路由模式使用的history，需要配置try_files，其作用是按顺序查找文件。当路由模式为history时，通过界面交互跳转页面，该过程是由router完成，不会出问题；但使用输入url的方式跳转页面或者刷新页面，nginx就会根据url找index.html，但这是个单页应用，history模式只是看起来向多页应用，并没有url上相应页面资源。
- 第一个location模块所使用的页面为history路由模式，设置了try_files $uri $uri/ /index.html;之后，会现根据输入的url找资源、然后根据url/找资源，都找不到会跳转至/usr/html/dist/index.html
- hash路由模式不用设置try_files，因为hash会在路由前加#，nginx不会找#后面的资源

与Nginx相关的常用Linux命令

1. Nginx 服务管理命令

启动 Nginx 服务：
```
sudo systemctl start nginx
```
停止 Nginx 服务：
```
sudo systemctl stop nginx
```
重启 Nginx 服务：
当你修改了 Nginx 配置文件后，通常需要重启服务：
```
sudo systemctl restart nginx
```
重新加载 Nginx 配置：
如果你只修改了配置文件并希望应用更改而不终止当前连接，可以重新加载配置：
```
sudo systemctl reload nginx
```
查看 Nginx 服务状态：
查看 Nginx 是否正在运行，检查运行状态：
```
sudo systemctl status nginx
```

2. Nginx 配置文件管理

测试 Nginx 配置文件是否正确：
修改 Nginx 配置文件后，使用以下命令检查配置文件语法是否正确：
```
sudo nginx -t
```
查看 Nginx 配置文件的路径：
有时可能需要知道 Nginx 的配置文件路径，可以通过以下命令查看：
```
nginx -t
```

3. 日志管理

Nginx 会记录访问和错误日志，用于排查问题。常用的日志管理命令如下：

查看 Nginx 错误日志：
错误日志通常位于 /var/log/nginx/error.log，你可以使用以下命令查看：
```
sudo tail -f /var/log/nginx/error.log
```
查看 Nginx 访问日志：
访问日志记录了每个请求的详细信息，通常位于 /var/log/nginx/access.log：
```
sudo tail -f /var/log/nginx/access.log
```

4. 端口管理和防火墙

由于 Nginx 监听特定端口（如 80、443），你需要管理这些端口：

查看端口是否被 Nginx 占用：
使用 netstat 或 ss 命令查看 Nginx 是否正在监听特定端口：
```
sudo netstat -tulnp | grep nginx
```
或：
```
sudo ss -tulnp | grep nginx
```

检查发布的前端项目是否正常

#url换成你想在浏览器访问的url，ip换为localhost，有返回值表示正常，大概率没开防火墙端口
curl http://localhost:88

开放防火墙端口（如 80 或 88）：

sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
sudo firewall-cmd --reload

5. 文件权限管理

Nginx 需要读取配置文件、静态资源等，因此文件权限很重要：

改变文件所有权：
确保 Nginx 用户有权限访问指定文件夹和文件：
```
sudo chown -R nginx:nginx /path/to/your/directory
```
修改文件权限：
设置正确的权限，使 Nginx 能够读取文件：
```
sudo chmod -R 755 /path/to/your/directory
```

6. 查看 Nginx 版本

查看当前安装的 Nginx 版本：

nginx -v

7. 安装和卸载 Nginx

安装 Nginx：
在基于 Debian 或 Ubuntu 的系统上安装 Nginx：
```
sudo apt update
sudo apt install nginx
```
在基于 CentOS 或 RHEL 的系统上安装：
```
sudo yum install nginx
```
卸载 Nginx：
在 Debian/Ubuntu 上：
```
sudo apt remove nginx
```
在 CentOS/RHEL 上：
```
sudo yum remove nginx
```