从0开始的网站搭建教程

啥是服务器？啥是域名？啥是前端、后端？啥是Linux？？？

---

相信任何一个有志于搭建个人网页的朋友，在点进别人的网页时，都会心生羡慕：哇草了，这么nb的网站是咋搞的啊，我也想搞一个！于是便有了这篇文章；本文志在为读者朋友搭建一条从0开始的网站教程，其中会融合我自己在搭建过程中的理解与感悟，同时我也会把我搭建过程中走过的弯路指出，让大家尽量避免；当然，并非所有人都适合独立搭建网站，即使在ai高度发达的今天，想要独立搭建网站也并非易事，很多特色情况要特色处理，绝不能人云亦云，更不能闭门造车。

本文适合哪些读者？

有一定电脑使用基础，了解前后端基本工作原理，了解计算机网络基本原理，肯花小钱（一般在20元以内），拥有强大的意志力不至于半途而废；

如果您连Windows都没摸熟（这里的不熟指的是基本的复制粘贴快捷键都不知道的），我建议还是不要折腾了，没那个必要。

注意：本文所部署的后端项目为单体项目，并非微服务项目！首先是微服务我没学，也没必要，成本高，维护复杂（其实就是不会和没钱）……

---

一、准备工作

我们必须要了解，当我们访问一个网页时，到底发生了什么。

当我们在网站输入框~(这里的输入框指的是浏览器最上部的网页输入框，并非传统意义上的搜索引擎搜索框)~输入一个网址时，到底发生了什么？

我们以熟知的wwt-lab.xyz为例：当我们输入好网址，并按下回车，浏览器拿到wwt-lab.xyz直接懵逼了：它只认识ip地址，不认识域名啊！

什么是ip？全是数字的就是ip！比如说：127.0.0.1，这种就是ip（不过这个是内网ip，别人访问不了的），什么是域名？域名就是便于人记忆的ip别名，没有人愿意记一大串数字，因此需要一个域名来帮助人们记忆；一个好的域名甚至包含着巨大商业价值，这也是为什么有的域名卖那么贵（比如说：https://www.中国原神大学.com，还真有这个网站）。

浏览器拿到域名，会先在缓存里去查：wwt-lab.xyz对应的ip是多少？如果查不到，就会向本地DNS服务器发出请求：帮我查一下wwt-lab.xyz的ip是多少？经过一系列递归查询，终于查到了：203.0.113.10 ！接下来，浏览器就会向ip地址对应的服务器发送TCP连接请求，一旦请求建立，服务器就会返回渲染网页要用到的数据，一个网页就这样展示到了你的屏幕。

因此，我们既然要搭建网页，肯定要有一台自己的服务器，有一个自己的域名，并且有自己的前后端项目，这样才具备了搭建网页的基础。

---

二、服务器配置

首先让我们来看看服务器，这是整个自建网站的核心，一切的一切都离不开它。这里我个人推荐阿里云服务器，不光是我目前正在使用它，并且它还有300元白嫖额度，只要不要太浪，还是很难用超的。

为什么不拿自己的电脑当服务器？

其实理论上是可以的，不过不推荐，并且实现起来很难。一般的家用电脑没有公网ip，并且运营商会限制家庭带宽的80和443端口，导致根本无法接收http和https请求；最主要的是，服务器一般不会关机，一旦关机，相当于你的网站从世界上消失了；而个人电脑很难做到这一点。

网络搜索：阿里云服务器 ECS，注册账号，领取300元免费额度；有了这300的免费额度，我们就能白嫖很久的云服务器。进入阿里云控制台，网址为https://ecs.console.aliyun.com/，选择创建试用ECS，如图所示： <img src="云服务器购买.png" alt="云服务器购买" style="zoom:33%;" />

这里可以看到右上角的提示：当前试用ECS为按量付费实例，不满足国内ICP备案要求，因此我们只能选择非中国大陆的服务器（中国香港可以选）！！！这里推荐试用地域选择中国香港的服务器，这样可以避免备案的烦恼；ECS实例及系统盘推荐前两个，无他，白嫖的久罢了。

当我们勾选服务器配置后，往下滑会让我们选择操作系统，这里选择Ubuntu，这是一种基于Linux的操作系统，选它就对了。预装应用可以不用管，后面也用不到。

为什么不选Windows？

首先，Windows不开源，要钱；其次，Windows对配置要求较高，烧钱烧的快；而Linux作为开源操作系统被广泛用于搭建服务器，这已经成了一种共识。

创建完实例后，我们就来到了如图所示页面；可以看到服务器信息有一行为47.86.24.255，这就是最关键的公网ip！有了它，别人才能访问你这台新生的服务器。

此时，我们直接在浏览器里输入公网ip，大概率是直接返回该网页无法正常运作，这是因为我们的服务器还没有配置前端和后端，甚至连nginx都没有配置，直接干巴巴访问，肯定啥都得不到。

接下来，我们连接云服务器，开始为这台服务器“开荒扩土”。点击蓝色的远程连接，点立即登陆，这样我们就进入到了Aliyun Workbench，连接方式选择免密登陆，随后我们就正式进入了云服务器的操作系统。

黑压压一片，没有图形，没有窗口，只有冰冷的代码：欢迎来到Linux！

这个界面就是我们以后要经常面对的界面，相信第一次看到这个界面免不了几分绝望；不过没关系，习惯就好。接下来我们要配置nginx。

nginx初步配置

什么是nginx？一句话总结：Nginx 是一个高性能的 Web服务器（Web Server）和反向代理（Reverse Proxy），用于接收客户端请求并转发、处理或分发到后端服务。你可以理解为 站在服务器最前面的“流量调度中心”，是它负责将请求转交给Java，Node等等。

在终端中输入以下命令：

sudo apt update
sudo apt install -y nginx

输入一行按回车！！！你就会发现屏幕开始疯狂输出一堆莫名其妙的信息，不管，等这一条命令执行完、提示符重新出现后，再输入下列命令：

sudo systemctl start nginx
sudo systemctl enable nginx

这是启动并设置开机自启，就这样简单的四行代码，我们就初步安装好了nginx！这么看来Linux也没有那么复杂，至少在安装软件上很让人放心。当然，如果你想看看nginx是否在运行，可以执行以下代码：

# 看是否在运行
sudo systemctl status nginx

# 看80端口是谁在监听
ss -lntp | grep :80

接下来我们要修改nginx的配置文件，先执行：

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

小技巧：屏幕信息太多怎么办？输入clear一键清屏！

然后我们大概率会看到如下页面：

我们要做的就是修改它！该怎么修改呢？这里涉及到vim的使用，大家可以等待我的另一篇教程：Linux常用命令集合！随后把整个配置文件改为如下：

server {
    listen 80;
    server_name _;

    location / {
        proxy_pass http://127.0.0.1:8080;  # 由于没有配置后端，这里的配置不会起作用；按理来说会走到nginx欢迎界面

        # 常用头（避免一些坑）
        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 nginx -t

看到

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

才可以继续。下一步就是重启nginx，命令如下：

sudo systemctl restart nginx

执行完成后，我们的nginx就初步配置好啦！此时在浏览器中输入http://47.86.24.255/（这里替换为你的公网ip，并且一定要用http!!!），就能看到nginx的欢迎页面啦！

Java环境安装

当然，这并非最终的nginx配置，只是目前的一个基础配置。接下来我们开始配置后端相关环境，首先是安装JDK：这里我们安装JDK17，在Aliyun Workbench中输入以下指令：

apt install -y openjdk-17-jdk

安装过程中，会出现以下界面：

这个界面的意思是有一些后台服务 (daemon) 正在使用“旧版本的库”，这里我们不用理会，直接按回车就好。安装完成后，执行以下指令：

java -version
javac -version

如果正确返回Java版本，说明安装成功，我们就可以进入MySQL和redis的安装了。

MySQL安装

输入以下指令：

apt install -y mysql-server

遇到紫色的页面依旧按回车，然后启动并设置开机自启：

systemctl start mysql
systemctl enable mysql
systemctl status mysql    # 输入这句指令后，如果屏幕中出现了绿色的active，说明MySQL已经启动

进入MySQL：

mysql -u root -p

注意：这里的密码默认为root，并且你在输入密码的过程中，**密码是不会显示在屏幕中的！**输入完后按回车，就正式进入了MySQL，接下来就是创建你自己的数据库、表。

==(红框中我输入了密码，但是看不到！！！)==

Redis安装

首先记得退出MySQL

常见的redis安装指令如下：

apt install -y redis-server
systemctl start redis-server
systemctl enable redis-server
systemctl status redis-server

测试：

redis-cli ping

返回：

PONG

就说明 Redis 跑起来了。

如果你的redis刚一安装，阿里云就开始给你疯狂发短信，说你的服务器有恶意行为，这说明你的redis版本太低，被扫描到漏洞成为了肉鸡，开始疯狂发送请求；这时候就要删除redis并从官网上下载新版本redis，删除redis指令如下：

apt remove -y redis-server
apt purge -y redis-server

至于如何从官网下载redis，可以自行Google。

前端环境安装

如果前端是Node.js服务，我们需要安装node和npm，指令如下：

apt update
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

验证：

node -v
npm -v

正常会看到：

v20.x.x
10.x.x

接下来我们安装pm2，这个pm2可以在后台托管前端项目，并且可以设置开机自启；指令如下：

npm install -g pm2

安装完成后，我们的服务器配置就基本完成啦！

---

三、域名

域名购买

域名不是天上掉下来的，是要买的，这里推荐https://www.spaceship.com/，在主页的搜索框内搜索你想购买的域名，这里打个比方：搜索yuansheng.com，结果如图：

这里可见：yuansheng.com这个域名早在1998年就被注册了，推荐的yuansheng.net要价高达800美刀；我们自己在选择域名的时候尽量不要选择.com之类的，可以尝试.xyz这种，要便宜许多。

将心仪的域名添加到购物车后，支付方式选择支付宝，然后立即支付；这样一个域名就真正属于你了！要注意的是，域名的有效期并不是无限长；结账界面可以看到，域名有效期默认是1年；如果想用很久，可以选择两年甚至十年；

支付完成后，可以选择保存域名购买记录为pdf，下载下来就可以看到你购买域名的凭证了！

域名配置

域名买好了，但它不会自动关联到我们的云服务器，这一步要我们自己配置。

打开网址https://www.spaceship.com/zh/application/domain-list-application/，进入到域名管理页面，单击你刚刚购买的域名，点击右下角的高级DNS：

在自定义记录里添加如下两条A记录：

注意：值 要填你自己的服务器公网IP！！！别填我的！！！！！！

第一条：主机填@，类型填A，值填公网ip，其他的默认。

第二条：主机填www，其他的跟第一条一样。

填完后，就是等待生效了。DNS不是立刻生效，一般几分钟 ~ 几小时，最长24小时；测试有没有生效可以在本机cmd中输入：

ping 你自己的域名

如果能ping通，说明配置成功了！

服务器放行端口

接下来我们要在云服务器的安全组中放行 80 和 443 端口。80 和 443 是网站对外提供服务的入口端口：用户在浏览器中访问 http://你的域名 时，通常会连接到 80 端口；访问 https://你的域名 时，通常会连接到 443 端口。 Nginx 会先接收这些请求，再根据配置把请求转发给后端服务；而后端程序本身通常运行在 8080、3000、8081 等内部端口。 如果 80 和 443 没有放行，外部用户就无法正常访问你的网站。

在云服务器控制台选择安全组，点击创建安全组，这里由于我已经创建过了，就直接展示我的安全组配置：

可以看到，我们自己要手动添加80端口和443端口，下面三条是System created rule.，不用理会。

nginx配置

接下来我们又要重新配置一遍nginx，让域名能访问；

进入云服务器，打开nginx配置文件：

sudo vim /etc/nginx/conf.d/default.conf

修改为：

server {
    listen 80;
    server_name 你的域名 www.你的域名;

    root /usr/share/nginx/html;
    index index.html;

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

修改完成后，访问：http://www.你的域名就能看到nginx欢迎页面啦！

下一步要开启https，推荐使用Let’s Encrypt（免费SSL），安装certbot：

sudo apt install certbot python3-certbot-nginx

申请证书：

sudo certbot --nginx -d 你的域名 -d www.你的域名

它会自动帮你：

• 申请证书
• 修改 nginx
• 开启 HTTPS

申请完后，你用https://你的域名也能访问网站了。

---

四、部署后端

后端项目打包

后端作为整个项目的灵魂，配置却及其的简单。多亏了jvm，我们只要上传一个jar包，让它后台运行，整个后端就配置好了！

不过配置后端之前，记得把自己的数据库先弄好，把自己的数据提前导入到数据库，这一步由于每个人的数据库管理软件不一样，我就不演示了，并且数据库中的数据作为隐私也不便于展示……

先进入后端项目根目录，也就是包含 pom.xml 或 build.gradle 的目录；然后在终端中执行：

mvn clean package -DskipTests

执行完毕后，如果显示Success，说明构建成功；此时在target目录下包含了生成好的jar：

点进去后会发现存在一个study-blog-1.0.0.jar，这就是我们要上传到云服务器的后端项目！

WinSCP使用

接下来的问题是：我打包好的jar怎么上传到云服务器呢？这里推荐一个可视化窗口软件：WinSCP。

在使用WinSCP之前，我们要在云服务器上开启允许密码登陆，在云服务器上输入：

vim /etc/ssh/sshd_config

找到并修改：

PasswordAuthentication yes
PermitRootLogin yes

两个都改为yes，然后输入命令：

sudo systemctl restart ssh  # 重启一下

然后给root设置密码：

sudo passwd root

输入你自己设置的密码。

输入完成后，目前的服务器就允许密码访问了，接下来回到WinSCP，连接服务器，成功后界面如下：

可以看到，整个WinSCP界面分为两部分：左边的是本机的目录，右边的是云服务器的目录；我们可以在云服务器先创建好对应的目录，在右侧界面右键创建目录：

我推荐目录如下：

/work/frontend
/work/backend

接下来把打包好的jar文件拖拽至创建好的backend文件夹里，这样就成功上传了！

运行后端项目

回到云服务器里，接下来我们要运行jar包，由于我们之前就已经安装了jdk，因此直接输入以下指令：

cd /root/work/backend  # 这里进入你自己后端部署路径
nohup java -jar 你自己的jar包名字 > app.log 2>&1 &    # 后台执行

就此，Java后端就算部署完了！

---

五、部署前端

前端的部署略显麻烦，主要是由于云服务器的配置不太好，如果在服务器上npm run build的话很可能会打爆磁盘，IO频率太高；因此我们选择先在本地构建，然后再打包至服务器，这样就可以把大量IO转移到本地完成；

本地构建

在本地前端根目录打开PowerShell，运行：

npm install
npm run build

Copy-Item -Recurse -Force .next\static .next\standalone\.next\static
Copy-Item -Recurse -Force public .next\standalone\public

构建完成后，Next.js 会生成：

.next/standalone
.next/static
public

最后执行打包指令：

Compress-Archive -Path .next\standalone\* -DestinationPath frontend-standalone.zip -Force

在根目录下应该能看到frontend-standalone.zip，上传至云服务器的/root/work/frontend文件夹下。

云服务器部署

进入云服务器的/root/work/frontend目录下，首先要解压压缩包，命令如下：

unzip frontend-standalone.zip

解压后在当前目录执行：

PORT=3000 NODE_ENV=production pm2 start server.js --name mywork-frontend --cwd /root/work/frontend
pm2 save
pm2 startup

这样，一个名为mywork-frontend的pm2进程就创建好了，并且设置好了开机自启；

如果上传了新的包，可以执行以下指令：

pm2 stop mywork-frontend
find /root/work/frontend -mindepth 1 -maxdepth 1 -exec rm -rf -- {} +          # 删除frontend目录下所有的文件
unzip frontend-standalone.zip 
pm2 restart mywork-frontend --update-env

查看日志：

pm2 logs mywork-frontend --lines 50

nginx配置修改

最后。我们来修改一下nginx配置，将请求转发到前端和后端。

server {
    listen 80;
    server_name 你的域名 www.你的域名;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name 你的域名 www.你的域名;

    ssl_certificate /etc/letsencrypt/live/你的域名/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/你的域名/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location /api/ {
        proxy_pass http://127.0.0.1:8080;
        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;
    }

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        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_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

---

总结

终于写完了。