网站部署：小白也能拥有自己的网站

本文是一篇保姆级静态网页部署教程，手把手教你把网页部署到自己的服务器上。如有其他需求，欢迎加博主微信交流：PlankBevelen。

注意：本篇只涉及静态网页的部署（如通过 webpack、vite 打包生成的 dist 文件）。Flask、Django 等动态网页的部署方式后续会单独出一篇。

准备工作

部署一个网站，你需要以下几样东西：

• 网页文件：通过 webpack、vite 等工具打包好的静态文件（dist 文件夹）
• 服务器：用来跑你的网站
• 域名（可选）：没有的话直接用服务器 IP 也能访问，只是不够美观

Step1：租一个自己的服务器

看自己的需求，如果要长期的还是自己买一个。如果只是想玩的话，可以上阿里云嫖三个月免费的服务器

对初学者，在没有较大的服务需求（没达到上w级）的情况下，2核2g和2核4g的服务器已经可以满足需求了。

购买域名（如有需要）

进去买了之后，记得去ICP备案，购买完成后，平台一般会有提示引导你去备案，按流程走就行。

买完域名后，需要去域名解析到服务器IP。

操作步骤：

1. 点击添加记录
2. 右侧会出现一个抽屉，填写域名解析信息
   1. 记录类型：A（默认的，不用改）
   2. 主机记录：@（如果是www域名，这里就填写www）
   3. 解析来源：不用修改
   4. 记录值：服务器IP（可以在服务器管理页面查看）
3. 点击确认
4. 解析生效很快，如何检查你的域名解析成功没
   1. 打开命令行，win+r，输入cmd，回车
   2. 输入ping 你的域名，回车
   3. 如果返回的IP地址就是你服务器的IP，说明解析成功

Step2：连接服务器

这里推荐两个工具：

• Xshell：用于通过 SSH 连接并操作服务器
• Xftp：用于在本地和服务器之间传输文件

配置安全组

首先去你的服务器控制台，点击安全组，创建一个新的安全组（他会默认给你一些规则，主播看了一眼，基本是配置好了，当然也可能出问题，后面会说）

确保 22 端口（SSH） 和 80 端口（HTTP） 已放行即可

链接服务器

下载之后就是用xshell连接服务器，连接方法很简单，就是输入服务器IP，用户名和密码，就可以连接上了。xftp也是一样的。当然可能会出现连接失败的情况，这时候就需要检查一下安全组是否配置正确了。

如果链接失败，按照以下方法排查：

1. 依旧打开你的命令行，ipconfig
2. 检查你的安全组里，ssh规则的ip是否包含了你当前的ip
3. 如果没有，就添加一下你的当前ip
4. 如果添加了，但是还是连接失败，直接添加一个 0.0.0.0/0（表示所有ip都可以连）

⚠️ 安全提醒：0.0.0.0/0 仅供临时调试使用，问题解决后务必立即删除该规则，否则服务器将完全暴露在公网中，存在被攻击风险。

Step3：服务器配置

安装Nginx

连上服务器后，在 Xshell 中依次执行：

sudo apt update
sudo apt install nginx

并且让nginx开机自启：

sudo systemctl enable nginx

这个时候，直接访问你的服务器IP，就可以看到nginx的欢迎页面了。

上传网页文件

现在服务器准备好了，该把我们写好的网页传上去了。

1. 打开你的xftp，连接上服务器
2. 在左侧找到本地打包好的静态文件夹（通常是 dist）
3. 将其上传到服务器的 /var/www/ 目录下（动态的现在我不想写）

配置Nginx

1. 打开nginx的配置文件

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

2. 找到server块，修改为以下内容（注释的地方自己改啊）

server {
    listen 80;
    server_name 你的域名 www.你的域名;  # 没有域名则填写服务器 IP
    root /var/www/dist;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    error_page 500 502 503 504 /50x.html;
}

3. 改完后按Ctrl+O保存，Enter确认，Ctrl+X退出
4. 重启nginx

sudo systemctl restart nginx

好啦，恭喜你拥有了自己的第一个网站！如果在操作过程中有任何卡壳的地方，或者想部署更复杂的动态网站（比如 Flask、Vue 项目），随时可以加博主微信交流：PlankBevelen