Hello,大家好,我是 Sunday。
无论是针对校招还是社招而言,部署自己的线上项目都是非常重要的一件事情。但是我在跟很多同学沟通之后发现,很多同学对如何部署线上项目并不熟悉,有的同学甚至连服务器和域名都不太能搞清楚。
所以,今天咱们就花上几分钟的时间,和大家一起,从购买服务器开始,来看看如何快速的部署自己的线上项目!
完整脑图:
01:服务器与域名购买
想要部署项目,那么首先我们需要先了解两个东西:
- 服务器
- 域名
其中,服务器是必须的,而域名不是必须的。但是要注意,这两个都需要花钱购买。服务器买了就能用,而域名还需要进行单独的备案操作才可以。
那么首先,咱们先来看服务器。
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 项目,直接连接即可
-
出现这个页面,就表示 连接成功了
03:软件安装
连接成功之后,咱们就需要在服务器上安装不同的软件。
这个软件主要有 3 个:
01:安装 Nginx
Nginx
是服务器上可用的服务。将来我们的项目都需要运行在 Nginx 上才行
shell
sudo yum install nginx -y
- 然后执行
nginx -t
看到这样的打印,证明 nginx 安装成功:
其中 红框 所标注的位置,就是 Nginx 的配置地址。
如果我们将来想要部署项目,那么少不了需要修改这个配置文件的内容的。
这里咱们先不管,后面再说。
02:安装 node
如果将来你会频繁切换 Node 版本的话,那么可以直接安装 nvm
。如果不频繁切换 Node ,那么可以直接安装指定的 Node 版本。
- 咱们这里就按照 会频繁切换来做 ,直接安装
nvm
。
shell
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
-
出现以下打印表示
nvm
安装成功 -
但是此时,
nvm
是无法直接使用的,因为我们还没有把它添加到 环境变量 中。此时执行nvm -v
会得到如下打印: -
想要正常使用,可以通过如下命令 添加
nvm
到环境变量:
shell
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 的版本:
shell
nvm install 16
出现一下打印,表示安装成功!
可以通过 node -v
进行验证
03:安装 mongoDB
mongo 是数据库的一种。因为我的服务都是使用的 mongo 数据库,所以在这里为大家演示,如何在服务器安装 mongoDB。
-
添加MongoDB的Yum存储库,这里需要做两步操作:
-
创建一个文件
/etc/yum.repos.d/mongodb-org-4.4.repo
并使用文本编辑器打开它。 -
将以下内容添加到文件中
shell[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
shellsudo yum install -y mongodb-org
-
启动服务
shellsudo systemctl start mongod
-
设置MongoDB为开机自启动:
shellsudo systemctl enable mongod
-
检查MongoDB服务状态:
shellsudo systemctl status mongod
打印如下内容,证明运行成功
04:项目部署
以上内容安装好之后,接下来就可以部署项目了。一般情况下项目部署分为三部分:
- 数据库
- 后端代码
- 前端代码
注意:以下操作是针对个人项目或小公司的极简方案。所以并没有任何的自动化、工程化流程。核心目标就是:以最简单的方式完成上线项目
数据库
对于很多个人项目来说,可能没有什么需要迁移的数据,这样的话只需要创建对应的库就可以了。
但是,如果有数据需要迁移,那么需要先把数据迁移完成。
整个过程也并不复杂,这里咱们使用 Navicat
这个工具来完成。
-
使用 Navicat 连接服务器数据库,基于
SSH
连接 -
保存之后,左侧会出现连接记录
此时,可以把之前数据库数据导出,然后导入到该数据库之中(没有的话,就直接新建即可)
-
选中指定数据库,导出之前数据
-
导出之后会被保存为
.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
就是一个服务nginx# 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