Linux部署Nginx前后端web教程

一、前言

目前Linux部署web类似于IIS，主要有两种方式来实现：Apache、Nginx；

Nginx性能更高一点，这里着重讲；

二、准备

1、安装 Nginx：

sudo apt install -y nginx

2、启动并设置 Nginx 开机自启：

sudo systemctl start nginx
sudo systemctl enable nginx

3、验证 Nginx 是否运行正常：

sudo systemctl status nginx

4、查看防火墙开放端口：

sudo ufw status

若无，下载启用防火墙：

sudo apt install -y ufw
sudo ufw enable

5、开放所需端口：

sudo ufw allow 80 /tcp

须知：80默认开放，所有与Linux交互的端口都必须开放，否则只本机能连；

三、部署网页

1、提前打包好前端文件；

2、将网站文件复制至 var/www/html ，html内部有.html文件的话需删除或替换；

须知：默认存在html文件夹，你也可自己创建文件夹；

不会复制的看我上期：快速上手！查看、拷贝、编辑、远程连接Linux命令-CSDN博客

若使用的是自己创建的文件则，创建符号链接以启用该站点配置：

sudo ln -s /etc/nginx/sites-available/my_http_api（创建文件名称） /etc/nginx/sites-enabled/

 测试配置文件是否正确：

sudo nginx -t

3、重启Nginx服务：

sudo systemctl restart nginx

4、成功样例：

须知：默认调用80端口，确保防火墙和公网开放80端口，若想自定义端口，可看部署后端配置文件配置；

四、部署后端

前言：这里所做的是Nginx转发运行的后端程序，就是将Linux所对应端口所传入转发至另个服务器，另个服务器（服务器可本Linux运行的后端程序也可其他服务器的）处理之后返回；

1、配置 Nginx ：

sudo nano /etc/nginx/sites-available/default

须知：主配置文件通常位于 /etc/nginx/nginx.conf，而站点配置文件通常位于 /etc/nginx/sites-available/ 目录下；

nano命令操作文件快捷键：

只需要记住：ctrl+X退出，Y保存，enter关闭；

80默认存在，假设我需要8080，完整放入配置最下面：

server {
listen 8080; # 可更改8080端口
listen [::]:8080;
root /var/www/html; # 部署web的根目录，自创文件的话，指向路径就行
index index.html index.htm;
server_name _;

location / {
# 启用目录列表功能(一般不启用，看个人)
# autoindex on;
# autoindex_exact_size off; # 显示文件大小为人类可读格式（如 KB、MB）
# autoindex_localtime on; # 显示文件的本地时间

try_files $uri $uri/ =404;
}

# 针对特点接口后缀文件如： .ashx 动态web文件，若服务器转发删除上发loaction，去除下方'#'
# location ~ \\.ashx$ {
# proxy_pass http://ip:port; # 转发后端程序或其他服务器部署http的url
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# }
}

针对https：

server {
listen 443 ssl; # 可更改443端口
server_name your_domain; # 域名

# 指定根目录，自创文件的话，指向路径就行
root /var/www/html;
index index.html;

# SSL 配置 自定义证书路径
ssl_certificate /home/your_domain/fullchain.pfx;
ssl_certificate_key /home/your_domain/privkey.txt;

# SSL 安全设置（推荐）
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers HIGH:!aNULL:!MD5;

# 处理请求的规则
location / {
try_files $uri $uri/ =404;
}

# 针对特点接口后缀文件如：.ashx 动态web文件，若服务器转发删除上发loaction，去除下方'#'
# location ~ \\.ashx$ {
# proxy_pass http://ip:port; # 转发后端程序或其他服务器部署http的url
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

设置证书、私钥权限(自定义证书文件路径)：

sudo chmod 600 /etc/nginx/ssl/*.pem
sudo chmod 600 /etc/nginx/ssl/*.key

2、测试配置文件是否正确：

sudo nginx -t

3、重启Nginx服务：

sudo systemctl restart nginx

4、成功样例：

访问前端界面：

调用后端接口：

须知：10058是我自定义的，和上方8080一样，确保防火墙和公网开放端口；

五、部署前端（CORS跨域）

允许前端页面请求访问后端资源，这是浏览器的安全策略；

1、配置 Nginx ：

sudo nano /etc/nginx/sites-available/default

须知：主配置文件通常位于 /etc/nginx/nginx.conf，而站点配置文件通常位于 /etc/nginx/sites-available/ 目录下；

nano命令操作文件快捷键：

只需要记住：ctrl+X退出，Y保存，enter关闭；

2、配置完后端转发后，在location转发内开放策略，以http为例，https同理；

server {
listen 8080; # 可更改8080端口
listen [::]:8080;
root /var/www/html; # 部署web的根目录
index index.html index.htm;
server_name _;

# location / {
# 启用目录列表功能(一般不启用，看个人)
# autoindex on;
# autoindex_exact_size off; # 显示文件大小为人类可读格式（如 KB、MB）
# autoindex_localtime on; # 显示文件的本地时间
# try_files $uri $uri/ =404;
# }

针对特点接口后缀文件如： .ashx 动态web文件，若服务器转发删除上发loaction，去除下方'#'
location ~ \\.ashx$ {
proxy_pass http://ip:port; # 转发后端程序或其他服务器部署http的url
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_set_header X-Forwarded-Proto $scheme;

# 代理头控制配置
proxy_pass_header Set-Cookie; # 允许将后端服务器的 Set-Cookie 头传递给客户端
proxy_pass_header Authorization; # 允许将后端服务器的 Authorization 头传递给客户端
proxy_hide_header 'Access-Control-Allow-Origin'; # （重点）隐藏后端返回的 CORS 头，避免冲突
proxy_ignore_headers Cache-Control Expires; # 忽略后端返回的缓存控制头，由 Nginx 管理缓存

# OPTIONS 预检请求处理
if ($request_method = 'OPTIONS') {
# 添加 CORS 头
add_header 'Access-Control-Allow-Origin' '*' always; # 允许所有来源访问
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always; # 允许的 HTTP 方法
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always; # 允许的请求头
add_header 'Access-Control-Max-Age' 1728000; # 预检结果缓存时间（20天）
add_header 'Content-Type' 'text/plain; charset=utf-8'; # 响应内容类型
add_header 'Content-Length' 0; # 响应内容长度
return 204; # 返回 204 No Content 状态码
}

# 常规请求的 CORS 配置（重点）
add_header 'Access-Control-Allow-Origin' '*' always; # 允许所有来源访问
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always; # 允许的 HTTP 方法
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always; # 允许的请求头

# 暴露给前端的响应头（重点）
add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range' always; # 允许客户端访问的响应头

}
}

3、直接拷贝复制至文件中就行，更改你后端的ip：port其他都不用动，如何你想更安全，可限制跨域源：

add_header 'Access-Control-Allow-Origin' '*' always; # 允许所有来源访问

add_header 'Access-Control-Allow-Origin' '前端域名' always; # 允许特定来源访问

六、针对特定接口配置规则

上方主要针对以.ashx为后缀的请求接口，也可以更改.ashx为其他，它只是后缀而已，下面我们来讲几个比较常用的配置格式写法；

针对 location __ {} 转发配置演示；

七、结语

1、失败最大可能性是端口是否开放了；

2、转发服务器的后端url是否有效；

3、配置是否正确，配置后是否重启Nginx；

4、关于Linux命令操作教程：快速上手！查看、拷贝、编辑、远程连接Linux命令-CSDN博客

5、关于Linux与Mysql：Ubuntu Linux远程连接Mysql（Linux or Windows）_linux上服务连接window上的mysql服务-CSDN博客

6、关于部署.net：.net程序部署Linux运行_liunk部署net程序-CSDN博客

至此，关于Linux的运用大致概全了；