写了个前端网页，如何上线装杯？

开头先放我的个人网页

点击打开 当然，网页借鉴（抄）了一位大佬的模板

介绍

        点开这里的，也许你已经作出了一个前端网页出来了，也许还没有（没有的宝子们可以上前端模板网站找一个拿来玩玩）。但至少应该知道对于初学者，前端比较主流的框架有HTML+CSS+JS。但是如何运行这个网页呢？

        但你（使用浏览器）点开index.html文件，此时你的电脑本地是可以运行并且看见这个网页的。不仅如此，与你的电脑处于同一局域网下的设备也是可以打开的。

        如果你的电脑是win，Win+R打开终端输入ipconfig（Linux用户是ifconfig）找到你电脑的ip（假设192.168.2.2），再看一下你电脑运行网页的端口，假设是8888,那么与你的电脑处于同一局域网下的设备打开链接192.168.2.2:8888就可以看见辣～

        这时候就有好学的小宝宝要问了：我想让世界各地的人都能点开我的网站，怎么做呢？

        Let's go on~

网站运行环境搭建

先说一下如何实现吧，使用云服务器是为了让其他联网的设备（暂时不考虑防火墙）都能够连接到运行网页的设备（云服务器）。以此连接网页。

如果没有域名，云服务器有个公网ip，你打开由公网ip+端口组合成的链接（如果云服务器运行了网页）也是能显示网页的，但是网页怎么能没有域名呢

所以我们租借域名，域名绑定云服务器IP

然后通过Nginx反向代理。

就这样，好看的网页就莱纳～

本部分包含租借云服务器、域名域名绑定云服务器，以及给云服务器安装宝塔面板，链接给到，自己去找吧～

上传网页代码

安装并打开宝塔面板

连接到服务器并且输入

bt

根据提示，打开并你服务器的宝塔面板的链接，如果进不去可以试试输入

bt 5

修改密码再进入

在文件一栏里面，把代码包传进“www/wwwroot”

细节如图（懒得打码了，补药攻击我的服务器哈）

关闭防火墙

（关闭某一端口即可，我们一般选择5000,因为我们打算把这个网页部署在5000）

1. 打开阿里云（或其他平台）的“防火墙”处设置，放行安全组

2.关闭端口的防火墙（一下是一些相关命令，自己摸索一下）

查看防火墙状态

systemctl status firewalld.service

关闭防火墙

systemctl stop firewalld.service

重启防火墙

systemctl restart firewalld.service

或者

firewall-cmd --reload

开启防火墙

systemctl start firewalld.service

查看放行的端口

firewall-cmd --zone=public --list-ports

重载防火墙

firewall-cmd --reload

开放某个端口（这里开放80），开放完需要重载

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

查看是否成功放行

firewall-cmd --zone=public --query-port=80/tcp

配置nginx.conf文件

相信根据我给到的教程，你应该也已经有了直接的服务器和域名了吧

相信你已经装好了nginx了吧

检查一下：连接云服务器终端，命令行打开nginx并输入

nginx -t

和我一样或差不多就说明nginx的安装没问题

下面开始配置nginx.conf文件

nginx -t 后会给出终端文件位置，vim或vscode去配置都行

在http块(应该是已经存在的)中加入server块

http{
    server {
        listen 80;
        server_name www.ljr672.top;
        location / {
            proxy_redirect off;
            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_pass http://127.0.0.1:5000;
        }
    }
}

这里把端口、域名改掉，其他不要动

然后在最外面加入server块(保证index.html是网页代码的主网页)，如下，修改配置的端口号、域名、网页代码放置的位置
位置是在这一节配置的

server {
    listen 5000;
    server_name www.ljr672.top;
    location / {
        root /www/wwwroot/place;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

到这里

配置的差不多了

终端输入

nginx -s reload

重载nginx.conf，没有问题的话，就大功告成了

装杯教程

笑死我了这个是我小号（别忘了让Ta复制到浏览器打开）