利用阿里云服务器结合Git+Nginx实现个人网站搭建部署
相信很多小伙伴们在平时学习编程的时候都有练习过大大小小的Demo。一般我们都会用Github来管理我们的这些项目。但是光本地运行不行,有时我们需要将它们部署到线上进行访问。在使用阿里云之前,我的做法是将Github本身作为一台服务器,将项目直接部署到Github上进行线上访问。
但是渐渐地我发现这种部署存在三个问题:
- 域名繁杂冗长,如: ‘https://github.com/BlackCodingCat/beauty-resume2020/index.html’
- 线上访问速度极慢
- 逼格太低
于是果断改用阿里云服务器,开启踩坑之旅,在此做一份踩坑记录,也希望给后面学习阿里云服务器部署的朋友们一些解决问题的思路。
步骤:
step1: 阿里云服务器购买
- 如果是学生身份的话,我们还是可以享受阿里云翼计划很大的优惠政策的。以下是穷学生购买链接。
这里我选择的是云服务器ECS,默认配置是1核CPU、2G内存、1M带宽以及40G系统盘,预装系统是CentOS7。包月仅需9块9! - 社会人士转向这里,选择云服务器ECS。
step2: 啰嗦的"售后"说明
- 购买完成后我们就拥有了具有上述配置的一台云服务器,相当于我们购买了一台新的电脑,上面预装了全新的操作系统。阿里云也会为这台服务器分配一个独一无二的ip地址,显然这就是访问我们部署项目的关键信息。举个例子,这里我分配的公网ip是120.26.74.176,那么以后我的项目便可以通过https://120.26.74.176/xxx/xxx这样的形式进行线上访问。
如果是外貌协会成员,觉得ip地址直接暴露在外面太丑了,可以申请域名,将域名与ip地址进行绑定。之后用户在访问的时候通过DNS服务器进行域名解析也可以访问到我们的项目。 - 进入阿里云的控制台,在这里我们可以看到实例列表信息,实例简单来说可以理解为一个具体的操作系统。(有关镜像、实例、容器的概念推荐《Docker入门与实践》这本书,虽然我也并没有看完。。。)。
step3: 安装Nginx
很显然,我们无法直接通过https://120.26.74.176 进行访问。这个时候,我们需要在新购买的云主机上配置Nginx反向代理服务器。
在配置之前,我们需要先熟悉一下 新朋友CentOs7操作系统。操作它有多种途径,这里我介绍两种:
- 使用putty。这也是我平时在公司里使用的比较多的工具。如何使用putty连接上远程服务器? 谷歌一下,你就知道。putty远程连接的方式在此不再赘述。
- 直接使用阿里云控制台实例列表后面的远程连接工具:
关于Linux的一些命令,比如 "ll"查看目录下文件、"cd "进入文件夹、 “cd …” 进入上级目录、"mkdir"新建文件夹、vim编辑器相关指令这些都不再赘述,后面都会用到,有需要时直接谷歌搜索一下即可。
进入控制台后,我们就可以正式开始通过命令的形式操作CentOs了。(坑点: 有一个到后面我才恍然大悟的大坑,原来刚开始我们进来的这个目录是"root文件夹",而不是"根目录"。我们"ll"一下,在root文件夹下刚开始是空空如也的。然后我们可以看一下根目录下的路径:)
关于如何在CentOs7上安装Nginx,我是参考的这篇文章,朋友们按步骤点进去一步步操作即可:CentOS 7 下 yum 安装和配置 Nginx,我们只需要操作到文章中的第四步"打开防火墙端口"即可。
这里有几个操作nginx的命令我们需要熟记(在此特别提一下,因为需要经常性地操作):
// 启动服务
sudo systemctl start nginx
// 停止服务
sudo systemctl stop nginx
// 重新加载服务,每次配置之后我们都需要重新加载一下
sudo systemctl reload nginx
// 查看服务状态
sudo systemctl status nginx
安装完成后,我们需要回到阿里云控制台添加安全组规则:
- 在实例右侧点击"管理"
- 点击左侧边栏"本实例安全组"-> 点击右侧的安全组列表,配置规则-> 添加安全组规格,按图示进行添加即可。
好了,经过一番操作,让我们来验证一下Nginx的安装是否成功吧:
在浏览器中输入ip地址,如果出现Nginx的欢迎语就代表我们已经安装成功了。
step4: 部署项目的思路
部署项目的思路是这样的: 首先,我们的项目统一由Github(如果在公司可能就是Gitlab)在git上进行管理。我们在Github上创建一个项目,将其克隆到本地进行开发,开发完成后,我们将打包好的项目push到git上,这些都是常规操作,也是我们每天工作都在干的事情。
现在我们有了阿里云服务器,在服务器上我们也把项目clone下来,当我们准备部署到线上时, 只需要使用git pull把代码拉下来即可,用户就可以直接通过访问线上路径访问我们的项目。
简而言之,就是我们自己操作两台电脑进行协同项目开发。
step5: 在centos上安装git
根据上述思路,我们需要在服务器上安装git
- 输入命令 sudo yum install git
- 查看git版本: git --version
- 在根目录下新建一个专门用来存储项目的文件夹
// 进入根目录
cd /
// 创建名为www的文件夹
mkdir www
// 进入www文件夹
cd www
// 克隆项目地址
git clone https://github.com/BlackCodingCat/beauty-resume2020.git
我们可以看到,项目已经克隆到了www文件夹下。以后我们在本地继续提交该项目的代码时,只需git pull将代码拉下来即可。
step6: 配置Nginx,部署项目
找到/etc/nginx/conf.d/目录下的default.conf 配置文件:
vim default.conf
用vim编辑器打开default.conf进行编辑:
找到location配置项,该配置项用于配置访问路径。按图示进行配置。
修改完成后,回到根目录下 cd / 重载nginx sudo systemctl reload nginx:
// 回到根目录
cd /
// 重载nginx
sudo systemctl reload nginx
访问 http://120.26.64.176/beauty-resume2020/index.html,此时我们可能会遇到403 Forbidden的错误,这时我们需要修改www文件夹的权限,将其设置为777最高权限:
// 进入根目录
cd /
// 将www文件夹设置为最高级权限
chmod 777 www
// 重新加载nginx
sudo systemctl reload nginx
再次访问 http://120.26.64.176/beauty-resume2020/index.html。项目终于部署成功!!
参考文档:
- 拿Nginx 部署你的静态网页
- nginx用法总结,映射静态资源,代理http,负载均衡,tcp服务,附带 haproxy 简单配置
- nginx 启动报错:Job for nginx.service failed because the control process exited with error code
- CentOS 初体验十:文件权限查看和修改
- 配置静态站点,修改Nginx默认根目录
如果朋友们在实际操作中遇到啥问题的话,欢迎加微信进行技术讨论。