『亚马逊云科技产品测评』活动征文｜基于EC2搭建星座运势网站

请你不要再迷恋哥

已于 2023-11-24 17:01:24 修改

阅读量46

点赞数

文章标签：科技

于 2023-11-23 10:59:29 首次发布

本文链接：https://blog.csdn.net/2301_79449247/article/details/134572167

版权

授权声明：本篇文章授权活动官方亚马逊云科技文章转发、改写权，包括不限于在 Developer Centre, 知乎，自媒体平台，第三方开发者媒体等亚马逊云科技官方渠道

前言

我一直对十二星座比较感兴趣，十二星座，是西方的一种占星学说。它有点类似于我们中国的十二生肖，十二生肖代表每个人的运势、气运。但是十二星座和十二生肖又有一点不一样，毕竟东西方的学说，还是有点不太一样的。
现在大家所说的十二星座其实起源于西方，源自于四大文明古国之一的古巴比伦。古代巴比伦人将天空分为许多区域，称为“星座”。不过那时星座的用处不多，被发现和命名的少之又少。黄道带上的12星座从开始就是用来计量时间的，而不像现在用来代表人们的性格。这也就是为什么，我们可以通过了解星座来了解自己的个性和命运的原因，是有一定道理的。
现在互联网上面，好像还没有和星座有关的网站。我就想着，我要开发一个星座运势的网站，来帮助人们查看一些星座运势相关的知识。
下面就开始介绍一下，怎么开发这个星座运势网站吧。

前端项目开发

开发这个星座运势网站，我是采用了原生html去开发的。这里就不采用vue或者react这些前端框架来开发了，直接就用原生html开发了。使用前端框架去开发，开发速度更快一点。但是我并不追求速度，用不用前端框架，区别不大。

模块划分

网站主要有这几个模块：

home
about
services
fealture
astrology
blogs

主要分为这几个模块，就没有拆分更多的模块了。但是，里面内容还是挺多的。

我们看下header部分代码

<header class="navbar navbar-expand-lg py-lg-0 py-2 px-0 theme-box-shadow header">
    <nav class="container">
      <a class="navbar-brand" href="#">
        <img src="static/picture/brand-light.png" class="img-fluid logo-light" alt="Brand Logo" title="Brand Logo">
        <img src="static/picture/brand.png" class="img-fluid logo-dark" alt="Brand Logo" title="Brand Logo">
      </a>
      <div class="switch order-lg-1 ms-0 ms-lg-3">
        <div class="btn-wrapper">
          <button class="navbar-toggler theme-bg-secondary border-0 menu-toggle" type="button" data-label="Menu" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bars"></span>
          </button>
        </div>
        <!-- color mode  -->
        <div class="nav-item dropdown ms-3 ms-lg-0">
          <button class="btn btn-link nav-link dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
            <svg class="svg-sprt my-1 theme-icon-active">
              <use href="#circle-half"></use>
            </svg>
            <span class="d-none ms-2" id="bd-theme-text">Toggle theme</span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="bd-theme-text">
            <li>
              <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                <svg class="svg-sprt opacity-50 theme-icon">
                  <use href="#sun-fill"></use>
                </svg>

                <svg class="svg-sprt ms-auto d-none">
                  <use href="#check2"></use>
                </svg>
              </button>
            </li>
            <li>
              <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                <svg class="svg-sprt opacity-50 theme-icon">
                  <use href="#moon-stars-fill"></use>
                </svg>

                <svg class="svg-sprt ms-auto d-none">
                  <use href="#check2"></use>
                </svg>
              </button>
            </li>
            <li>
              <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                <svg class="svg-sprt opacity-50 theme-icon">
                  <use href="#circle-half"></use>
                </svg>

                <svg class="svg-sprt ms-auto d-none">
                  <use href="#check2"></use>
                </svg>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="menunav">
          <li class="nav-item">
            <a class="nav-link nav-effect" aria-current="page" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-effect " href="#about">About</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link nav-effect dropdown-toggle" href="#services" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
              Services
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Services One</a></li>
              <li><a class="dropdown-item" href="#">Services Two</a></li>
              <li><a class="dropdown-item" href="#">View all Product</a></li>
            </ul>
          </li>
          <li class="nav-item nav-effect ">
            <a class="nav-link" href="#features">Features</a>
          </li>
          <li class="nav-item nav-effect ">
            <a class="nav-link" href="#astrology">Astrology</a>
          </li>
          <li class="nav-item nav-effect">
            <a class="nav-link" href="#news">Blogs</a>
          </li>
        </ul>
        <div class="d-flex ms-2 justify-content-center">
          <button onclick="window.location.href='#contact';" class="rounded-pill btn custom-btn-primary font-small primary-btn-effect" type="submit">Consult Now</button>
        </div>
      </div>
    </nav>
  </header>

我们可以看到，光一个头部部分，代码就非常多了。因为都是使用原生html来写的，所以代码量挺多的。
这里就不展示所有的代码了，都是一些原生html和css的一些知识。这些知识，并不是很难或者很复杂。相信你自己做的时候，也是可以开发出来的。
当你把网站开发完成，就可以进入到下一个阶段了。

服务器部署

前端项目开发好之后，就可以进行服务器部署了。
登录亚马逊云服务器后，进入服务器控制台页面。我们在顶部搜索栏里，搜索EC2。
在这里插入图片描述
我们可以查看到搜索结果，点击EC2，进入EC2的控制台页面。
进入EC2控制台之后，我们点击启动实例按钮。
点击启动实例，进入到实例创建页面

这里，我给实例起了一个名字，叫做myserser。当然，你可以自己起一个别的名字。
下面的操作系统，我选择的是亚马逊的一个linux系统。
对，没错，服务器里我使用的是linux系统。如果你对linux系统不熟悉的话，也可以安装其它系统，比如windows系统。
关于安装其它系统，这里就不介绍了。
下面还有一些其它配置项
在这里插入图片描述
不过这些配置项，我们暂时使用不到，先保持默认即可。如果后面想要修改，还是可以修改的。
不过注意，有一个密钥对，是必须要配置的。一会实例创建好了，我们需要使用这个密钥对去登录的。
点击创建新密钥对按钮
在这里插入图片描述
这里我给密钥对命名为myserver，和我实例名字一样，方便记忆。点击创建密钥对，密钥对就创建好了。
整个实例的配置项，都配置好了，我们点击右侧的启动实例按钮，就可以把实例启动了。

实例正在创建
在这里插入图片描述
我们等待一会。

实例启动成功了，我们就可以连接实例了，点击中间的连接到实例按钮。

我们选择第一种方式就好了，它是基于浏览器的网页形式，显示命令行窗口的。有了命令行窗口，我们就可以在里面输入命令行，执行命令了。
我们进入到命令行窗口了，和实例建立了连接
在这里插入图片描述
网站部署，我是打算使用docker来进行部署的。最近在学习docker，刚好可以使用docker来进行部署这个星座运势网站。
要使用docker，我们需要先安装docker。
我们在控制台里，执行下面命令

sudo yum install yum-utils device-mapper-persistent-data lvm2

配置docker的镜像源

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

然后安装docker

sudo yum install docker

等待一会，docker就安装好了。docker安装好之后，我们还需要安装其它工具–git。
执行命令

sudo yum install git -y

之所以要安装git，是因为一会我们要从git仓库上，把代码拉下来。
等待一会，git就安装好了。
在亚马逊云服务器里，安装这些工具，还是挺快的。
从git仓库拉取代码

git clone https:xxxxx

把你的仓库代码拉下来之后，进入到你的项目里。
我们通过cd命令，进入你的项目文件夹，通过ls命令查看文件

ls

查看之后，我们的html文件，都下载下来了。
我们在仓库项目里，已经添加了dockerfile文件。有了dockerfile这个文件，docker就可以根据dockerfile文件，来构建我们的镜像。
我们在控制台里，执行下面命令

docker build node.Dockerfile -t constellation .

我们解释一下这行命令：docker使用node.Dockerfile文件，来构建镜像，-t后面，是给这个构建的镜像起一个名字。
执行之后，就开始构建镜像了。
等待一会，镜像就构建好了。构建好镜像之后，我们查看一下docker里有哪些镜像。
在控制台里，输入下面命令

docker images

在这里插入图片描述

我们可以看到，刚才构建的镜像，已经在docker的本地镜像里面了。
镜像已经构建好了，我们就可以在容器里，运行这个镜像了。
在控制台里，执行下面命令

docker run -rm -p 80:80 constellation

这句命令的意思是，使用docker，启动constellation这个镜像。-rm，表示当容器停止时，自动删除容器。-p后面，是docker把容器里的端口暴露给宿主机端口。最后一个constellation，是我们刚才构建的镜像名字。
执行命令之后，docker使用constellation惊醒启动容器。
由于我们是使用80端口的，而实例的安全组里面，80端口是默认就放开的。
在这里插入图片描述