我们在本地编写完 Node.JS 项目, 需要将文件打包上传到云服务器, 其他人才可以通过 url 地址来访问和浏览我们编写的程序, 在申请, 配置阿里云 ECS 服务器的时候也是踩坑无数, 看了网上很多大神的文章, 自己也尝试汇总整理了一下, 文中涵盖的知识点比较多, 大概包含如下几个方面:
申请阿里云免费服务器
安装 node.JS
安装 Nginx 服务器
安装 MongoDB 数据库
安装 pm2 进程管理工具
安装本地 FTP
上线移动端项目
之前还写过一篇《阿里云服务器崩溃自救指南》, 如果在本地误删了某些文件导致服务器崩溃, 可以参考我总结的步骤尝试恢复一下.
注: 本人使用的是 MacOS 系统, 如果是 Windows 环境, 文中的部分操作会有所不同.
申请阿里云免费服务器
注册阿里云账号
在首页选择你的登录方式, 可以通过阿里旗下的第三方服务登录.
image
这里我使用支付宝登陆, 扫码进入页面后点击授权即可.
image
如果没有阿里云账号的话, 可以输入会员名和手机号码进行快速注册.
image
注册之后进入到 ECS 管理控制台页面
image
在最新活动中找到新手上路, 我们可以申请阿里云免费套餐, 试用时长为一个月.
image
image
个人实名认证
选择个人版, 申请之前需要进行个人实名认证.
image
点击个人实名认证链接进入实名认证页面, 选择个人实名认证.
image
推荐个人支付宝授权认证, 跳转页面后输入家庭住址就可以完成认证了.
image
申请阿里云免费服务器
认证完成后点击立即抢购按钮申请免费云服务器
image
点击免费领取按钮, 选择 CentOS/ 7.6 64 位操作系统.
image
勾选同意协议, 点击立即领取按钮, 即可领取成功.
image
此时再进入管理控制台页面就可以看到有一台云服务器正在运行
image
重置实例密码
在更多中找到重置实例密码, 点击设置密码.
image
该密码不是你的阿里云账号登录密码, 而是你的云服务器访问密码, 必须由大写字母, 小写字母, 数字, 特殊符号中的三项构成.
image
重启实例
重置实例之后, 点击右上角重启实例.
image
在弹出的页面中点击确定按钮
image
重启实例之后会显示停止中状态, 大概需要等待 30 秒.
image
配置安全组
在侧边栏网络与安全中找到安全组, 点击右边的配置规则.
image
端口范围填入: 1/60000, 为了使用更多服务, 如果这个端口范围填的太小了, 像 MongoDB 这种 27017 端口的数据库就无法安装. 授权对象为 0.0.0.0/0, 为了让所有端口都可以访问.
image
点击确定保存, 就可以在页面中看到我们配置好的安全组.
image
远程连接
可以使用它自带的远程连接, 连接服务器.
image
点击远程连接, 系统会给你提供一个密码用于远程连接你的云服务器, 该密码只出现一次, 出现的时候需要记录下来.
image
在远程连接中用户名为: root, 点击回车输入之前重置过的实例访问密码 (默认输入密码的时候是不显示的, 输入完成后点击回车即可).
image
但是我们一般不推荐在远程连接中访问服务器, 原因是: 如果超过一分钟没有操作就会自动断开连接, 需要重新输入远程连接密码, 比较繁琐. 而且在它的控制台中无法复制粘贴指令, 只能通过其窗口右上角的复制命令输入来操作, 比较麻烦.
image
我们可以在本地终端 cmd 中通过 SSH 命令来访问云服务器
Git SSH root@39.96.84.220(你的公网 IP)
可以在实例的配置信息中找到公网 IP
image
连接成功后运行查看文件命令:
cd / ls
image
安装 node.JS
运行 yum 命令在云服务器上安装 Node.JS
sudo yum install Node.JS
安装成功后显示完毕, 运行 node -v 查看版本号:
image
安装 Nginx 服务器 (静态服务器)
具体操作步骤出自这篇文章:
《CentOS 7 下安装 Nginx》
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
image
(2) 第二种方式 (推荐): 使用 wget 命令下载
wget -c https://nginx.org/download/nginx-1.10.1.tar.gz
我下载的是 1.10.1 版本, 这个是目前的稳定版.
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
image
8. 启动, 停止, 重启 nginx
- cd /usr/local/nginx/sbin/
- ./nginx
查询 nginx 进程:
ps aux|grep nginx
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
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 写入
image
复制上面内容粘贴后按 esc, 输入
:(冒号)wq!(感叹号)
image
强制保存并退出
image
3. 安装 MongoDB
安装命令:
yum -y install MongoDB-org
安装完成后显示:
image
4. 安装完成后, 查看 mongo 安装位置
whereis mongod
image
查看修改配置文件 的命令是: VIM /etc/mongod.conf
5. 启动 MongoDB
systemctl start mongod.service
顺便说一下停止 MongoDB 的命令是 :systemctl stop mongod.service
6. 查看 MongoDB 的状态
systemctl status mongod.service
显示 active(running) 说明已经成功开启.
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
image
安装成功后运行 pm2 list 查看所有进程状态
image
安装本地 FTP
这里推荐使用 FileZilla, 这是一款免费, 开源, 跨平台的 FTP 软件, Mac 系统 Windows 系统的用户都可以放心食用. 这里我们使用 SFTP 连接, 端口号默认值是 22.
image
连接成功后会列出 root 下的目录
image
上线移动端项目
1. 修改项目配置文件
找到项目的 vue-config.JS 配置文件, 在 module.exports 中将 publicPath: 改为:'/v-douban/'.
image
同时本地请求数据的路径也需要加上 / v-douban
image
2. 打包文件
执行 yarn build 将项目打包成 dist 文件包
3. 连接 FTP 服务器, 修改 nginx
进入 / usr/local/nginx/conf 目录, 传输 nginx.config 文件到本地.
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 文件到服务器, 覆盖原文件.
image
在终端连接数据库, 并且重启 nginx 服务器.
./nginx -s reload
image
进入 / usr/local/nginx/HTML 目录创建一个 v-douban 文件夹
image
将打包后的 dist 文件夹中的所有文件上传到服务器
image
传输完成后, 即可在网页中访问上线项目 http://39.96.84.220/v-douban
image
线上浏览效果:
image
image
来源: http://www.jianshu.com/p/3693dad9b574