利用阿里云服务器结合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。项目终于部署成功!!
在这里插入图片描述

参考文档:

如果朋友们在实际操作中遇到啥问题的话，欢迎加微信进行技术讨论。
在这里插入图片描述

敲代码的小黑猫

发布了12 篇原创文章 · 获赞 39 · 访问量 4万+

私信关注