从0到1：阿里云服务器部署web项目全过程

迷南。 2022-12-11 03:20 286阅读 0赞

我们在本地编写完Node.js项目，需要将文件打包上传到云服务器，其他人才可以通过url地址来访问和浏览我们编写的程序，在申请、配置阿里云ECS服务器的时候也是踩坑无数，看了网上很多大神的文章，自己也尝试汇总整理了一下，文中涵盖的知识点比较多，大概包含如下几个方面：

*  申请阿里云免费服务器
 *  安装node.js
 *  安装Nginx服务器
 *  安装mongoDB数据库
 *  安装pm2进程管理工具
 *  安装本地FTP
 *  上线移动端项目

之前还写过一篇[《阿里云服务器崩溃自救指南》][Link 1]，如果在本地误删了某些文件导致服务器崩溃，可以参考我总结的步骤尝试恢复一下。

*注：本人使用的是MacOS系统，如果是windows环境，文中的部分操作会有所不同。*

### 申请阿里云免费服务器 ###

注册阿里云账号

在首页选择你的登录方式，可以通过阿里旗下的第三方服务登录。

![e554b93689e95db5fb9432b87fac60f0.png][]

image

这里我使用支付宝登陆，扫码进入页面后点击**授权**即可。

![598f49366bcfe63fe198d294e5f7b86f.png][]

image

如果没有阿里云账号的话，可以输入会员名和手机号码进行快速注册。

image

注册之后进入到ECS管理控制台页面

image

在最新活动中找到**新手上路**，我们可以申请**阿里云免费套餐**，试用时长为一个月。

image

个人实名认证

选择**个人版**，申请之前需要进行**个人实名认证**。

image

点击个人实名认证链接进入实名认证页面，选择**个人实名认证**。

image

推荐个人支付宝授权认证，跳转页面后输入家庭住址就可以完成认证了。

image

申请阿里云免费服务器

认证完成后点击**立即抢购**按钮申请免费云服务器

image

点击**免费领取**按钮，选择`Centos/ 7.6 64位`操作系统。

image

勾选同意协议，点击**立即领取**按钮，即可领取成功。

image

此时再进入管理控制台页面就可以看到有一台云服务器正在运行

image

重置实例密码

在更多中找到重置实例密码，点击设置密码。

![869cede57e3aacb64514a2eadc27e599.png][]

image

该密码不是你的阿里云账号登录密码，而是你的云服务器访问密码，必须由大写字母、小写字母、数字、特殊符号中的三项构成。

![af45899368c183d1b8ec6d8d139dc8bb.png][]

image

重启实例

重置实例之后，点击右上角**重启**实例。

![e9f243689423cb8db7d6d1bae861337c.png][]

image

在弹出的页面中点击**确定**按钮

![dede3c274d00949c56dedaa25dd2998d.png][]

image

重启实例之后会显示停止中状态，大概需要等待30秒。

![b7c7002603ae32444e811a07eeef2754.png][]

image

配置安全组

在侧边栏网络与安全中找到安全组，点击右边的**配置规则**。

image

端口范围填入：1/60000，为了使用更多服务，如果这个端口范围填的太小了，像mongodb这种27017端口的数据库就无法安装。授权对象为0.0.0.0/0，为了让所有端口都可以访问。

image

点击确定保存，就可以在页面中看到我们配置好的安全组。

image

远程连接

可以使用它自带的远程连接，连接服务器。

image

点击**远程连接**，系统会给你提供一个密码用于远程连接你的云服务器，该密码只出现一次，出现的时候需要记录下来。

![ca245caf3df06a71da311a4500f805ae.png][]

image

在远程连接中用户名为：root，点击回车输入之前重置过的实例访问密码（默认输入密码的时候是不显示的，输入完成后点击回车即可）。

![e15d73a0e54a0a1b9dfa8acec62eb504.png][]

image

但是我们一般不推荐在远程连接中访问服务器，原因是：如果超过一分钟没有操作就会自动断开连接，需要重新输入远程连接密码，比较繁琐。而且在它的控制台中无法复制粘贴指令，只能通过其窗口右上角的**复制命令输入**来操作，比较麻烦。

![6ba8efb8597b3bb0782b860ac0057d63.png][]

image

我们可以在本地终端cmd中通过ssh命令来访问云服务器

git ssh root@39.96.84.220(你的公网IP)

可以在实例的配置信息中找到公网IP

![b483361cdc9a442e94e072ecc82b6465.png][]

image

连接成功后运行查看文件命令：

cd /
    ls

![53c18d9e92e0bc08758cd5bd35991548.png][]

image

### 安装node.js ###

运行yum命令在云服务器上安装Node.js

sudo yum install nodejs

安装成功后显示完毕，运行node -v查看版本号：

image

### 安装Nginx服务器（静态服务器） ###

具体操作步骤出自这篇文章：

《CentOS 7 下安装 Nginx》

[https://www.linuxidc.com/Linux/2016-09/134907.htm][https_www.linuxidc.com_Linux_2016-09_134907.htm]

> Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP3、SMTP代理服务器；Nginx可以作为一个HTTP服务器进行网站的发布处理，另外Nginx可以作为反向代理进行负载均衡的实现。

1. **gcc 安装**

安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：

yum install gcc-c++

安装成功：

image

2. **PCRE pcre-devel 安装**

PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令：

yum install -y pcre pcre-devel

安装成功：

image

3. **zlib 安装**

zlib 库提供了很多种压缩和解压缩的方式， nginx 使用 zlib 对 http 包的内容进行 gzip ，所以需要在 Centos 上安装 zlib 库。

yum install -y zlib zlib-devel

安装成功：

image

\*\*3. \*\*OpenSSL 安装

OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议，并提供丰富的应用程序供测试或其它目的使用。  
nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http），所以需要在 Centos 安装 OpenSSL 库。

yum install -y openssl openssl-devel

安装成功：

image

4.下载nginx安装包

（1）第一种方式：直接下载`.tar.gz`安装包，nginx官网地址：[https://nginx.org/en/download.html][https_nginx.org_en_download.html]

![c9f780b58523dc207562e3a19eddb5d2.png][]

image

（2）第二种方式（**推荐**）：使用`wget`命令下载

wget -c https://nginx.org/download/nginx-1.10.1.tar.gz

我下载的是1.10.1版本，这个是目前的稳定版。

![60502c84940fda967f7fd017d2d3ed80.png][]

image

5. 解压

依然是直接命令：

tar -zxvf nginx-1.10.1.tar.gz
    cd nginx-1.10.1

6. 配置

在 nginx-1.10.1 版本中你就不需要去配置相关东西，使用默认配置就可以了。

./configure

7. 编译安装

make
    make install

查找安装路径：

whereis nginx

![37a68b1c1187ba81606fc4e5d9ba053a.png][]

image

8. 启动、停止、重启nginx

cd /usr/local/nginx/sbin/
    ./nginx

查询nginx进程：

ps aux|grep nginx

![90357ccbd7d212c262cb393b3e983c82.png][]

image

启动成功后，在浏览器可以看到这样的页面：

image

./nginx -s stop：此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。  
./nginx -s quit：此方式停止步骤是待nginx进程处理任务完毕进行停止。

**重启nginx**

（1）第一种方式：先停止再启动（推荐）：  
对 nginx 进行重启相当于先停止再启动，即先执行停止命令再执行启动命令。如下：

./nginx -s quit
    ./nginx

（2）第二种方式：重新加载配置文件：  
当 nginx的配置文件 nginx.conf 修改后，要想让配置生效需要重启 nginx，使用`-s reload`不用先停止 ngin x再启动 nginx 即可将配置信息在 nginx 中生效，如下：

./nginx -s reload

9. 开机自启动

即在`rc.local`增加启动代码就可以了。

vi /etc/rc.local

输入字母**i**出现—INSERT—，按键盘上下键控制光标

image

将如下代码复制粘贴

/usr/local/nginx/sbin/nginx

按esc键退出，输入**强制保存退出**命令：

:wq!

到这里，nginx就安装完毕了，启动、停止、重启、开机自启动操作也都完成了。

image

### 安装mongoDB数据库 ###

具体操作步骤出自这篇文章：

《centos7安装MongoDB3.4》

[https://www.cnblogs.com/web424/p/6928992.html][https_www.cnblogs.com_web424_p_6928992.html]

> MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。他支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是他支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

1. 创建yum源文件

vim /etc/yum.repos.d/mongodb-org-3.4.repo

2. 添加以下内容

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

字母**i**代表INSERT写入

![4aa8ca2dde2cc1de9889d83f349d3487.png][]

image

复制上面内容粘贴后按**esc**，输入

：（冒号）wq！（感叹号）

![2f2b42a3b499baccb51e7f24375567bd.png][]

image

强制保存并退出

![735fb8f59f3643dc93e4e4c6348616f1.png][]

image

3. 安装MongoDB

安装命令：

yum -y install mongodb-org

安装完成后显示：

![7721b973204e678d8a14fb4e4d71437c.png][]

image

4. 安装完成后,查看mongo安装位置

whereis mongod

![a4890f21cb4ac110f93021172657a7a7.png][]

image

查看修改配置文件 的命令是：`vim /etc/mongod.conf`

5. 启动mongodb

systemctl start mongod.service

顺便说一下停止mongodb的命令是 ：`systemctl stop mongod.service`

6. 查看mongodb的状态

systemctl status mongod.service

显示active（running）说明已经成功开启。

![bc8ebbe5d6e78f76588751b163a13d4c.png][]

image

7. 停止防火墙

CentOS 7.0默认使用的是firewall作为防火墙，这里改为iptables防火墙。

**外网访问需要关闭firewall防火墙：**

systemctl stop firewalld.service

8. 禁止防火墙开机启动

systemctl disable firewalld.service

9. 设置开机启动

systemctl enable mongod.service

img

10. 启动Mongo shell查看数据库

执行完以上操作步骤后输入命令：`mongo`，查看数据库`show dbs`。

image

11. 设置mongodb远程访问

设置完之后可以在本地连接数据库

输入

vim /etc/mongod.conf

编辑mongod.conf配置文件，找到bindIP，在前面按i输入`#`注释掉这一行，输入`:wq!`保存退出。

image

12. 重启mongodb

systemctl restart mongod.service

image

### 安装pm2进程管理工具 ###

> PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等。

当我们在服务器中启动node服务时如果直接通过`npm start`或者`node index.js`启动，则一旦退出ssh远程登录，或者在本地关闭终端则服务就会停止运行，所以我们要安装pm2这个node进程管理工具，通过pm2 start来开启进程就不会出现这个问题了。

全局安装命令：

npm install -g pm2

![dc3ca5d0950cd8c9182cdf7fb7437972.png][]

image

安装成功后运行`pm2 list`查看所有进程状态

![1edef1cdec7baccf0973fe769a403368.png][]

image

### 安装本地FTP ###

这里推荐使用FileZilla，这是一款免费、开源、跨平台的FTP软件，mac系统windows系统的用户都可以放心食用。这里我们使用SFTP连接，端口号默认值是22.

![d3fc25795eb64e407e3319d26a12a3cd.png][]

image

连接成功后会列出root下的目录

![665dd7ddcd2a6021a6ddb8536d7ae43e.png][]

image

### 上线移动端项目 ###

1. 修改项目配置文件

找到项目的Vue-config.js配置文件，在module.exports中将publicPath: 改为：'/v-douban/'。

![c195b8a84b182b4b7bb9f896723001b2.png][]

image

同时本地请求数据的路径也需要加上/v-douban

![db265b5c2a6bd2e16896540384606d4d.png][]

image

2. 打包文件

执行`yarn build`将项目打包成dist文件包

3. 连接FTP服务器，修改nginx

进入/usr/local/nginx/conf目录，传输nginx.config文件到本地。

![fc6b8712ee8a1198323f3faa9aaf1377.png][]

image

修改nginx.config文件，配置数据接口代理。

location /api/db {
                proxy_pass http://47.96.0.211:9000/db;
            } 
    
            location /data/my {
                proxy_pass http://118.31.109.254:8088/my;
            } 
    
            location /douban/my {
                proxy_pass http://47.111.166.60:9000/my;
            }

上传新的nginx.config文件到服务器，覆盖原文件。

![7b4b3e8e3a8fe2e436247db87cd2ef9c.png][]

image

在终端连接数据库，并且重启nginx服务器。

./nginx -s reload

![da454b6c61901279d8ef09de0f5347b4.png][]

image

进入/usr/local/nginx/html目录创建一个v-douban文件夹

![a9a31785d8d1b21c7de8e3e59af3f538.png][]

image

将打包后的dist文件夹中的所有文件上传到服务器

![77f63e0c49829851ded95ffaa8573503.png][]

image

传输完成后，即可在网页中访问上线项目[http://39.96.84.220/v-douban][http_39.96.84.220_v-douban]

![235526fd5e88912470d6f8f13b9ad825.png][]

image

线上浏览效果：

![1486df4bb3c61986cf6feac6ce0a67d2.png][]

image

![7b7457f86099052714e04ea980b92289.png][]

image

转载：https://www.jianshu.com/p/3693dad9b574

[Link 1]: https://www.jianshu.com/p/24347979055d
[e554b93689e95db5fb9432b87fac60f0.png]: /images/20221123/8178ecbe46a34907a5420211744ccf6e.png
[598f49366bcfe63fe198d294e5f7b86f.png]: /images/20221123/a983bd1ce3324e0093162a6e829bf1d6.png
[869cede57e3aacb64514a2eadc27e599.png]: /images/20221123/9bbcc60e6c65495ca876e72b6c1d20f9.png
[af45899368c183d1b8ec6d8d139dc8bb.png]: /images/20221123/dfce22ccc3784fd8b3bdb6beb4379d46.png
[e9f243689423cb8db7d6d1bae861337c.png]: /images/20221123/5bf3ec8dcd4f4261997759d1d995bc91.png
[dede3c274d00949c56dedaa25dd2998d.png]: /images/20221123/1e8d54a24a344925a1a293263dfdb9d7.png
[b7c7002603ae32444e811a07eeef2754.png]: /images/20221123/1ce9306756af4e5eb25aa4a49d6ba44d.png
[ca245caf3df06a71da311a4500f805ae.png]: /images/20221123/679607330daf4d94a5e8b726f81125fc.png
[e15d73a0e54a0a1b9dfa8acec62eb504.png]: /images/20221123/8214d52d858244a0a71113b7401409bd.png
[6ba8efb8597b3bb0782b860ac0057d63.png]: /images/20221123/d0f3331244014c029b0197052519e878.png
[b483361cdc9a442e94e072ecc82b6465.png]: /images/20221123/b1a35e4e4a204acaaecf13a0fc1e0db3.png
[53c18d9e92e0bc08758cd5bd35991548.png]: /images/20221123/b9479787c0b64628bac4baca7bd738c3.png
[https_www.linuxidc.com_Linux_2016-09_134907.htm]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.linuxidc.com%2FLinux%2F2016-09%2F134907.htm
[https_nginx.org_en_download.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fnginx.org%2Fen%2Fdownload.html
[c9f780b58523dc207562e3a19eddb5d2.png]: /images/20221123/3de5d019e990457088b92de0ac3c9fe4.png
[60502c84940fda967f7fd017d2d3ed80.png]: /images/20221123/a378897670c142dcb47d606cf73572a2.png
[37a68b1c1187ba81606fc4e5d9ba053a.png]: /images/20221123/14caa2436f074dcc967be98fe80c08c6.png
[90357ccbd7d212c262cb393b3e983c82.png]: /images/20221123/f8230463bded48118d7e9c85d3f38eab.png
[https_www.cnblogs.com_web424_p_6928992.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Fweb424%2Fp%2F6928992.html
[4aa8ca2dde2cc1de9889d83f349d3487.png]: /images/20221123/f43a1a076d1f4a5ab282f78d9c22e847.png
[2f2b42a3b499baccb51e7f24375567bd.png]: /images/20221123/83f022b7d2f746a2a1f2e436afb32d12.png
[735fb8f59f3643dc93e4e4c6348616f1.png]: /images/20221123/6bd0d0e01fd9470e87ad4c89d4833a72.png
[7721b973204e678d8a14fb4e4d71437c.png]: /images/20221123/bd7fc46bc5d1435ebaba87a6b8ecbfea.png
[a4890f21cb4ac110f93021172657a7a7.png]: /images/20221123/e330025b9257435e9d0d540a2c4f2be9.png
[bc8ebbe5d6e78f76588751b163a13d4c.png]: /images/20221123/dce354cd4e354d48bc70fbbb11b05fce.png
[dc3ca5d0950cd8c9182cdf7fb7437972.png]: /images/20221123/9b7b1431f7be4687b83c74fdd2ad9d3d.png
[1edef1cdec7baccf0973fe769a403368.png]: /images/20221123/dd09287927a64ba68e07dd44d4feb5b3.png
[d3fc25795eb64e407e3319d26a12a3cd.png]: /images/20221123/9843a459dfd94f27856270ca2e31f25b.png
[665dd7ddcd2a6021a6ddb8536d7ae43e.png]: /images/20221123/b709df9821b84820839d3e0511cddf0a.png
[c195b8a84b182b4b7bb9f896723001b2.png]: /images/20221123/a5bb638b71814249b41f43408c430e57.png
[db265b5c2a6bd2e16896540384606d4d.png]: /images/20221123/b72d94dfef2c4f8882dbaaf720a0140b.png
[fc6b8712ee8a1198323f3faa9aaf1377.png]: /images/20221123/4dc2ff00c9264f7da855a3d63236b34d.png
[7b4b3e8e3a8fe2e436247db87cd2ef9c.png]: /images/20221123/be46ece1cfba4f02ab75c020b133ed3c.png
[da454b6c61901279d8ef09de0f5347b4.png]: /images/20221123/372909941a4243eb93a676e3f6cc07c3.png
[a9a31785d8d1b21c7de8e3e59af3f538.png]: /images/20221123/88bf09f0b18f4fd1a46bc1932aed096e.png
[77f63e0c49829851ded95ffaa8573503.png]: /images/20221123/49b4f6e1cb954391be72f026348532c0.png
[http_39.96.84.220_v-douban]: https://links.jianshu.com/go?to=http%3A%2F%2F39.96.84.220%2Fv-douban
[235526fd5e88912470d6f8f13b9ad825.png]: /images/20221123/9540eaea01b44c1b88f0706a74953f8a.png
[1486df4bb3c61986cf6feac6ce0a67d2.png]: /images/20221123/d358e87d5e414296a894debe49b82685.png
[7b7457f86099052714e04ea980b92289.png]: /images/20221123/73bb85153d3c4f8a972a5b41c6d5fc57.png