从0到1，手把手教你部署自己的线上项目

Hello，大家好，我是 Sunday。

无论是针对校招还是社招而言，部署自己的线上项目都是非常重要的一件事情。但是我在跟很多同学沟通之后发现，很多同学对如何部署线上项目并不熟悉，有的同学甚至连服务器和域名都不太能搞清楚。

所以，今天咱们就花上几分钟的时间，和大家一起，从购买服务器开始，来看看如何快速的部署自己的线上项目！

视频版地址：www.bilibili.com/video/BV15D...

完整脑图：

01：服务器与域名购买

想要部署项目，那么首先我们需要先了解两个东西：

1. 服务器
2. 域名

其中，服务器是必须的，而域名不是必须的。但是要注意，这两个都需要花钱购买。服务器买了就能用，而域名还需要进行单独的备案操作才可以。

那么首先，咱们先来看服务器。

1.1 服务器与公网 IP

服务器并不是一个单独的东西，它和 公网IP 是一起的。

其中：

1. 服务器：相当于一台电脑。你的项目将来得在这个电脑中运行
2. 公网 IP 地址：相当于找到这个电脑的方式。在网络中通过 公网 IP 访问到你的电脑。这里大家要注意 你的家用电脑是没有公网IP地址的，我们平时用的 192.168 开头的都是局域网 IP 地址

那么怎么获得这两个东西呢？这就得花钱买了。国内比较常见的有：阿里云、腾讯云、华为云大家可以根据自己的需要进行购买。注意：买服务器送公网 IP。也就是说你只需要购买一个服务器就可以了，公网IP 不需要单独购买

咱们就以阿里云为例：

1. 在产品这里找到 云服务器ECS：

2. 点击立即购买，这里注意：新用户拥有 3 个月的免费试用机会。足够覆盖你的找工作时间了。如果不够用，腾讯云也送 3 个月，可以循环白嫖一下。

3. 配置的话，咱们根据需要进行选择就可以，一般情况下 最低配（2V2G） 的足够个人使用了。系统这里我选择的是 centos 7.6 的版本，大家如果不知道选择什么系统的话，那么就按照我的选择就可以。

4. 然后往下滑，可以看到 公网IP 的选项，这里建议选择 按固定带宽付费，带宽值个人选择 1M 就行，越大越贵。

5. 登录凭证选择 自定义密码，这个最简单。

6. 其他的选择默认就行了。

然后就是下单付费，这样你就有了一个自己的服务器，同时这个服务器会赠送一个访问地址，也就是公网 IP。在 控制台 可以直接查看到

域名

说完了服务器，那么接下来咱们说域名。

域名是需要买的，不光要买还得备案才可以。

备案成功之后，还需要进行一些配置才可以。这里我建议，你 在哪买的服务器，就在哪里买域名 。这是最省事的。

国内无论是 阿里云 还是 腾讯云 都提供了域名的购买。我们还是以 阿里云 为例：

1. 首先在输入框中输入你要查找的域名，比如：lgdsunday。这样就可以看到所有未注册的域名。

2. 点击立即注册，就可以直接购买了。

这里有个点大家要注意，所有的服务，无论是 域名还是服务器，续费的价格都会比第一次购买要贵。

所以说，如果使用时间长的话，一开始多买几年价格上会更加合适。

如果不确定使用期限的话，那么可以根据大家自己的情况进行选择

3. 域名购买之后，会有一个备案信息。这个备案只有在初次购买的时候才会有，所以这里没办法跟大家演示。

4. 不过，整个备案流程并不复杂。并且整个流程会有专门与你电话联系，按照官方指导走就行。不会有什么难度的。

5. 域名备案成功之后，就可以正常使用了。使用需要到 域名控制台 中使用才可以。

因为我的域名是在 腾讯云购买的，所以说，这里我只能在腾讯云跟大家演示了。不过 腾讯云和阿里云 他们的域名控制台都差不太多，这个大家不需要过于担心。

6. 进入 云解析 DNS 控制台，大概就张这样

7. 点击 解析 按钮，就可以看到所有的解析记录

8. 点击左上角的 添加记录 就可以新增一条解析。其中 每一条解析大家可以理解为是一个服务的访问路径。

但是： 这里有一个知识点大家需要知道。我们购买的域名是 lgdsunday.club。也就是说 它不是包含 www 的。

也就是说， www.lgdsunday.club 并不是购买的域名，而是在 lgdsunday.club 的基础上配置的域名。

9. 点击 添加记录，比较重要的选项有 3 个：

1. 主机记录：表示真是访问域名是多少。比如这里写入 www，那么访问的地址就是 www.lgdsunday.club
2. 记录类型：里面的选项值有很多。常用的有两个：
   1. A 记录：指定主机名（或域名）对应的IP地址记录。咱们刚才买的服务器不是送了一个公网IP 吗？ 使用 A 记录就可以把公网 IP 写在 记录值 这里
   2. CNAME 记录：别名解析。一般如果做 CDN 访问的时候会经常用。使用 CNAME 记录 记录值 就需要写 CDN 访问地址了
   3. 记录值：主要看 记录类型 写的是什么内容了。

配置好了之后，点击确认。就可以直接访问了。

但是要 注意： 这样的访问，只能是 http 的协议，也就是 http://www.lgdsunday.club 。如果想要使用 https 的协议，那么需要使用到 SSL 证书才可以。这一块如果大家有需要，咱们单独再开一个视频来说。

---

那么到这里，关于 服务器 与 域名 相关的域名相关的内容，就全部说完了哈。

总结来说就是：

• 服务器 和 域名都需要购买。服务器贵点，一般个人使用选择最低配（1核、1G内存、1M带宽）的就可以，一年五百块钱左右。个人使用的域名便宜点（也有很贵的），一年几十块钱。
• 服务器购买之后，会赠送 公网IP，可以通过公网 IP 直接访问到服务器。但是如果想要访问具体部署的项目（服务），还需要完成一些其他操作才可以（后面会讲到的）。
• 域名购买之后，需要备案 ，才可以生效。可以在 域名控制台 配置 解析 绑定域名和服务器IP。这样就可以直接通过 域名 而不是 公网IP 进行访问了。不过，这样的域名默认是 http 协议的，如果想要使用 https 协议，那么需要单独购买 SSL 证书

02：服务器连接

服务器本质上是一台电脑。但是区别在于 我们没有办法像访问家用电脑一样直接打开就可以访问

所以说，想要访问到服务器就必须使用到一些工具才可以。也就是 服务器连接工具。

这个工具有很多，在选择的时候需要注意 一定要选择支持 FTP 传输的。为什么呢？

刚才咱们也提到了，服务器本质上是台电脑，而链接服务器就是 用你现在的电脑，访问服务器这台电脑。

那么在访问的时候就会涉及到两个操作：

1. 指令操作：通过指令控制电脑的行为，比如前端都会用到的 npm i -g xxx 通过这样的指令来安装一些插件。这个操作可以直接链接服务器完成
2. 文件传输：因为个人项目部署，所以没有必要搞什么复杂的自动化流程。最简单的方式就是把打包之后的项目直接传到服务器上 。如果通过指令上传未免有点复杂了。所以说，如果有个工具可以让你直接 拖拽上传 是不是就方便很多了。那么这种拖拽工具就叫做 FTP 工具 ，它使用 FTP 协议 来完成文件传输

如果大家不知道用什么的话，那么我给大家做一个简单的推荐：

• 在 windows 上，推荐大家使用 XSHELL + XFTP，企业版是需要收费的。不过有一些社区版可以免费使用，大家可以自行搜索。

  

  

• 在 mac 上，推荐大家使用 Termius ，我也是一直在使用这个，在这里推荐给大家。

  

那么接下来，我就通过 Termius 给大家进行演示链接方式。

咱们在这里先演示连接，然后到后面在演示 FTP

Termius 的连接并不复杂，共分为 两步：

1. 直接点击 新建服务器

2. 输入 IP 地址、用户名、密码

3. 双击 Item 项目，直接连接即可

4. 出现这个页面，就表示 连接成功了

03：软件安装

连接成功之后，咱们就需要在服务器上安装不同的软件。

这个软件主要有 3 个：

01：安装 Nginx

1. Nginx 是服务器上可用的服务。将来我们的项目都需要运行在 Nginx 上才行

sudo yum install nginx -y

2. 然后执行 nginx -t 看到这样的打印，证明 nginx 安装成功：

其中 红框 所标注的位置，就是 Nginx 的配置地址。

如果我们将来想要部署项目，那么少不了需要修改这个配置文件的内容的。

这里咱们先不管，后面再说。

02：安装 node

如果将来你会频繁切换 Node 版本的话，那么可以直接安装 nvm 。如果不频繁切换 Node ，那么可以直接安装指定的 Node 版本。

1. 咱们这里就按照 会频繁切换来做 ，直接安装 nvm。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

2. 出现以下打印表示 nvm 安装成功

3. 但是此时，nvm 是无法直接使用的，因为我们还没有把它添加到 环境变量 中。此时执行 nvm -v 会得到如下打印：

4. 想要正常使用，可以通过如下命令 添加 nvm 到环境变量：

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
source ~/.bashrc

5. 此时再次执行 nvm -v ，打印成功：

6. 有了 nvm 之后，就可以直接安装指定的 node 版本了。比如：我这了安装 16 的版本：

nvm install 16

出现一下打印，表示安装成功！

可以通过 node -v 进行验证

03：安装 mongoDB

mongo 是数据库的一种。因为我的服务都是使用的 mongo 数据库，所以在这里为大家演示，如何在服务器安装 mongoDB。

1. 添加MongoDB的Yum存储库，这里需要做两步操作：

   1. 创建一个文件 /etc/yum.repos.d/mongodb-org-4.4.repo 并使用文本编辑器打开它。

   2. 将以下内容添加到文件中

      [mongodb-org-4.4]
      name=MongoDB Repository
      baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.4/x86_64/
      gpgcheck=1
      enabled=1
      gpgkey=https://www.mongodb.org/static/pgp/server-4.4.asc

在这样的操作过程中，如果直接在服务器通过 vim编辑器 书写就比较麻烦。所以，我们就可以在本地完成编辑之后，利用到 FTP 上传到服务器的指定位置：

1. 在电脑创建 mongodb-org-4.4.repo 文件，并写入以上内容

2. 然后在 Termius 中找到 SFTP

3. 链接服务器之后，找到 /etc/yum.repos.d/ 路径，直接把本地写好的文件放入即可

以上操作完成，即可安装 mongoDB

1. 安装 mongoDB

   sudo yum install -y mongodb-org

2. 启动服务

   sudo systemctl start mongod

3. 设置MongoDB为开机自启动：

   sudo systemctl enable mongod

4. 检查MongoDB服务状态：

   sudo systemctl status mongod

   打印如下内容，证明运行成功

   

04：项目部署

以上内容安装好之后，接下来就可以部署项目了。一般情况下项目部署分为三部分：

1. 数据库
2. 后端代码
3. 前端代码

注意：以下操作是针对个人项目或小公司的极简方案。所以并没有任何的自动化、工程化流程。核心目标就是：以最简单的方式完成上线项目

数据库

对于很多个人项目来说，可能没有什么需要迁移的数据，这样的话只需要创建对应的库就可以了。

但是，如果有数据需要迁移，那么需要先把数据迁移完成。

整个过程也并不复杂，这里咱们使用 Navicat 这个工具来完成。

1. 使用 Navicat 连接服务器数据库，基于 SSH 连接

2. 保存之后，左侧会出现连接记录

此时，可以把之前数据库数据导出，然后导入到该数据库之中（没有的话，就直接新建即可）

1. 选中指定数据库，导出之前数据

2. 导出之后会被保存为 .js 格式的文件

3. 直接在新的服务器中创建数据库导入文件即可

后端代码

有了数据库之后，导入后端代码就很简单的。

后端代码不同于前端代码，不需要打包上传。

1. 创建对应路径 sunday/

2. 把后端代码拖到指定路径下（不需要 node_modules）

3. 然后在服务器执行命令 npm i 即可

---

此时依赖安装完成，项目就可以启动了。但是： 要注意在服务器上启动项目不可以和电脑一样。

即：不可以直接通过 node index.js 或者 nodemon 进行启动。因为这样会占死你的控制台，无法进行后续操作了

所以，想要在服务器上启动服务，需要借助一些工具，比如 pm2

Pm2 是一个 npm 的包，安装比较方便，直接 npm i -g pm2 即可

安装成功之后，在项目目录中，直接 pm2 start index.js --name="admin" 即可

不过， 此时访问你的接口地址，你会发现依然访问不到：

出现这个情况是因为 对于服务器端口访问来说，是存在 安全组 的概念的

端口没有配置 安全组访问 是不可以被访问到的

所以需要到 阿里云服务器控制台 找到 安全组配置 进行 端口配置

配置完成之后，访问即可得到如下响应：

至此，服务端配置完成！

前端代码

服务端配置成功之后，下面咱们就需要配置前端项目了。

前端项目需要先打包，然后配合 nginx 完成发布操作。

1. 前端项目打包，一般都可以通过 npm run build 完成打包操作
2. 打包之后，生成 dist 文件，直接拖到服务器指定位置，我这里适合 server 平级

上传成功之后，接下来就需要配置 nginx 了

1. 通过 nginx -t 命令获取到 nginx 的配置文件位置

2. 当前当前路径文件，拖拽到本地 进行修改（vim 并不好用，不推荐使用，太麻烦）

3. 配置的方式根据大家的协议不同（http 或者 https）各不相同。我这里有 SSL 证书，所以可以直接配置 https 协议请求。大家没有可以略过

4. 把 SSL 证书直接放入到 /etc/nginx/ 路径即可

5. 然后进行 nginx 的 server 配置，一个 server 就是一个服务

       # admin
       server {
            #SSL 访问端口号为 443
           listen 443 ssl; 
           #填写绑定证书的域名
           server_name  你的域名没有就写 localhost;
           #证书文件名称   
           ssl_certificate 证书地址; 
           #私钥文件名称
           ssl_certificate_key 证书地址; 
           ssl_session_timeout 5m;
           #请按照以下协议配置
           ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
           #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
           ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
           ssl_prefer_server_ciphers on;
   
           root   /sunday/admin/dist/;
           #charset koi8-r;
           access_log  logs/host.access.log  main;
           location / {
               # index  index.html index.htm;
               try_files $uri $uri/ /index.html;
           }
           # 反向代理，解决跨域问题（单独代理请求到服务端）
           location /prod-api/ {
               proxy_pass 代理服务器地址;
               # rewrite ^/api/(.*)$ /$1 break;
               # $host 变量，Host 为变量名 
               proxy_set_header   Host              $host; #域名转发
               proxy_set_header   X-Real-IP         $remote_addr; #IP转发						
               proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
               proxy_set_header   Cookie            $http_cookie; # cookie 配置
           }
   
       }

这样配置之后，即可访问

总结

那么到这里，咱们就已经完成了一个线上的项目部署。

不过大家要注意，以上属于部署方案适合 个人项目或者小公司的项目部署方案。所以就不要提出 工程化、自动化、流程化 的东西了，这些方案好是好，但是并不适合个人或者小团队。

希望这些可以对大家有帮助。我是 Sunday，咱们下次再见咯~

前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer