Linux部署Nginx前后端web教程
一、前言
目前Linux部署web类似于IIS，主要有两种方式来实现：Apache、Nginx；
Nginx性能更高一点，这里着重讲；
二、准备
1、安装 Nginx：
sudo apt install -y nginx2、启动并设置 Nginx 开机自启：
sudo systemctl start nginx
sudo systemctl enable nginx3、验证 Nginx 是否运行正常：
sudo systemctl status nginx4、查看防火墙开放端口：
sudo ufw status若无，下载启用防火墙：
sudo apt install -y ufw
sudo ufw enable5、开放所需端口：
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 -t3、重启Nginx服务：
sudo systemctl restart nginx4、成功样例：
须知：默认调用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/*.pemsudo chmod 600 /etc/nginx/ssl/*.key2、测试配置文件是否正确：
sudo nginx -t3、重启Nginx服务：
sudo systemctl restart nginx4、成功样例：
访问前端界面：
调用后端接口：
须知：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 __ {} 转发配置演示；
| 正则表达式 | 含义 | 演示 | |
|---|---|---|---|
| / | 任意路径都转发 | / | |
~ /api/.+\.ashx$ |
| /api/user.ashx | |
~ api.*\.ashx$ |
| /v1/api_data.ashx | |
~^/v\d+/api/.+\.ashx$ | 以版本号开头的API路径 | /v2/api/update.ashx | |
~* /api/.+\.ashx$ | 不区分大小写的/api/路径匹配 | /Api/status.ashx |
七、结语
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的运用大致概全了；
助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)