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

Hello，大家好，我是 Sunday。

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

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

视频版地址：https://www.bilibili.com/video/BV15D42137dF

图片

完整脑图：

图片

一、服务器与域名购买

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

• 服务器
• 域名

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

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

1.1 服务器与公网 IP

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

其中：

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

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

咱们就以阿里云为例：

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

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

• 配置的话，咱们根据需要进行选择就可以，一般情况下 最低配（2V2G） 的足够个人使用了。系统这里我选择的是 centos 7.6 的版本，大家如果不知道选择什么系统的话，那么就按照我的选择就可以。
• 然后往下滑，可以看到 公网IP 的选项，这里建议选择 按固定带宽付费，带宽值个人选择 1M 就行，越大越贵。
• 登录凭证选择 自定义密码，这个最简单。
• 其他的选择默认就行了。

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

图片

域名

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

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

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

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

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

图片

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

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

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

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

• 域名购买之后，会有一个备案信息。这个备案只有在初次购买的时候才会有，所以这里没办法跟大家演示。
• 不过，整个备案流程并不复杂。并且整个流程会有专门与你电话联系，按照官方指导走就行。不会有什么难度的。
• 域名备案成功之后，就可以正常使用了。使用需要到 域名控制台 中使用才可以。

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

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

图片

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

图片

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

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

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

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

• 主机记录：表示真是访问域名是多少。比如这里写入 www，那么访问的地址就是 www.lgdsunday.club。
• 记录类型：里面的选项值有很多。常用的有两个：

A 记录：指定主机名（或域名）对应的IP地址记录。咱们刚才买的服务器不是送了一个公网IP 吗？使用 A 记录就可以把公网 IP 写在 记录值 这里。

CNAME 记录：别名解析。一般如果做 CDN 访问的时候会经常用。使用 CNAME 记录 记录值 就需要写 CDN 访问地址了。

记录值：主要看 记录类型 写的是什么内容了。

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

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

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

总结来说就是：

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

02：服务器连接

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

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

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

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

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

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

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

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

图片

图片

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

图片

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

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

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

• 直接点击 新建服务器。

图片

• 输入 IP 地址、用户名、密码。

图片

• 双击 Item 项目，直接连接即可。
• 出现这个页面，就表示 连接成功了。

三、软件安装

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

这个软件主要有 3 个：

1.安装 Nginx

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

sudo yum install nginx -y

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

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

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

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

2.安装 node

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

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

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

• 出现以下打印表示 nvm 安装成功。

图片

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

图片

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

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

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

图片

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

nvm install 16

图片

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

可以通过 node -v 进行验证。

3.安装 mongoDB

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

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

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

将以下内容添加到文件中。

[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 上传到服务器的指定位置：

• 在电脑创建   mongodb-org-4.4.repo 文件，并写入以上内容。
• 然后在 Termius 中找到 SFTP。

图片

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

图片

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

• 安装mongoDB

sudo yum install -y mongodb-org

• 启动服务

sudo systemctl start mongod

• 设置MongoDB为开机自启动：

sudo systemctl enable mongod

• 检查MongoDB服务状态：

sudo systemctl status mongod

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

四、项目部署

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

• 数据库
• 后端代码
• 前端代码

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

数据库

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

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

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

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

图片

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

图片

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

• 选中指定数据库，导出之前数据。

图片

• 导出之后会被保存为 .js 格式的文件。
• 直接在新的服务器中创建数据库导入文件即可。

后端代码

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

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

• 创建对应路径 sunday/。

图片

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

图片

• 然后在服务器执行命令 npm i 即可。

图片

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

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

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

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

图片

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

图片

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

图片

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

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

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

图片

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

图片

至此，服务端配置完成！

前端代码

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

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

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

图片

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

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

图片

• 当前当前路径文件，拖拽到本地 进行修改（vim 并不好用，不推荐使用，太麻烦）。
• 配置的方式根据大家的协议不同（http 或者 https）各不相同。我这里有 SSL 证书，所以可以直接配置 https 协议请求。大家没有可以略过。

图片

• 把 SSL 证书直接放入到 /etc/nginx/ 路径即可。
• 然后进行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 配置
        }

    }

这样配置之后，即可访问。

总结

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

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