京东-优惠雷达
新人页面
精选商品
首月0月租体验,领12个月京东PLUS
自营热卖

利用阿里云服务器结合Git+Nginx实现个人网站搭建部署

抛却悲喜跟你走 1年前   阅读数 107 0

利用阿里云服务器结合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操作系统。操作它有多种途径,这里我介绍两种:

  1. 使用putty。这也是我平时在公司里使用的比较多的工具。如何使用putty连接上远程服务器? 谷歌一下,你就知道。putty远程连接的方式在此不再赘述。
  2. 直接使用阿里云控制台实例列表后面的远程连接工具:

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

  关于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 

在这里插入图片描述
安装完成后,我们需要回到阿里云控制台添加安全组规则:

  1. 在实例右侧点击"管理"
    在这里插入图片描述
  2. 点击左侧边栏"本实例安全组"-> 点击右侧的安全组列表,配置规则-> 添加安全组规格,按图示进行添加即可。
    在这里插入图片描述
    在这里插入图片描述

好了,经过一番操作,让我们来验证一下Nginx的安装是否成功吧:
在浏览器中输入ip地址,如果出现Nginx的欢迎语就代表我们已经安装成功了。
在这里插入图片描述

step4: 部署项目的思路

  部署项目的思路是这样的: 首先,我们的项目统一由Github(如果在公司可能就是Gitlab)在git上进行管理。我们在Github上创建一个项目,将其克隆到本地进行开发,开发完成后,我们将打包好的项目push到git上,这些都是常规操作,也是我们每天工作都在干的事情。
  现在我们有了阿里云服务器,在服务器上我们也把项目clone下来,当我们准备部署到线上时,  只需要使用git pull把代码拉下来即可,用户就可以直接通过访问线上路径访问我们的项目。
简而言之,就是我们自己操作两台电脑进行协同项目开发。

step5: 在centos上安装git

   根据上述思路,我们需要在服务器上安装git

  1. 输入命令 sudo yum install git
    在这里插入图片描述
  2. 查看git版本: git --version
    在这里插入图片描述
  3. 在根目录下新建一个专门用来存储项目的文件夹
// 进入根目录
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。项目终于部署成功!!
在这里插入图片描述

参考文档:

  1. 拿Nginx 部署你的静态网页
  2. nginx用法总结,映射静态资源,代理http,负载均衡,tcp服务,附带 haproxy 简单配置
  3. nginx 启动报错:Job for nginx.service failed because the control process exited with error code
  4. CentOS 初体验十:文件权限查看和修改
  5. 配置静态站点,修改Nginx默认根目录

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

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

注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: