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所对应端口所传入转发至另个服务器,另个服务器处理之后返回;

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; # 转发服务器部署IIS的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; # 转发服务器部署IIS的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;
    }
}

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

复制代码
sudo nginx -t

3、重启Nginx服务:

复制代码
sudo systemctl restart nginx

4、成功样例:

访问前端界面:

调用后端接口:

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

五、结语

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的运用大致概全了;

相关推荐
亮子AI2 小时前
【Typescript】未知类型如何处理?
linux·javascript·typescript
梵得儿SHI2 小时前
Vue Router 路由管理从入门到精通:基础、导航与参数传递实战(含避坑指南)
前端·javascript·vue.js·路由基础配置·版本适配·路由实例创建·路由规则定义
IT_陈寒2 小时前
JavaScript 性能优化实战:7 个让你的应用提速 50%+ 的 V8 引擎技巧
前端·人工智能·后端
IvyWangT2 小时前
Uvicorn的多进程&Nginx的负载均衡 区别
nginx·负载均衡
Watermelo6172 小时前
【前端实战】Axios 错误处理的设计与进阶封装,实现网络层面的数据与状态解耦
前端·javascript·网络·vue.js·网络协议·性能优化·用户体验
不一样的少年_2 小时前
【性能监控】别只做工具人了!手把手带你写一个前端性能检测SDK
前端·javascript·监控
开发者小天2 小时前
react中使用复制的功能
前端·javascript·react.js
AI炼金师2 小时前
Chrome 中的 Claude 入门指南
前端·chrome
德迅云安全—珍珍2 小时前
2025 年 Chrome 浏览器 0Day 漏洞全面分析:八大高危漏洞遭利用
前端·chrome