云计算大作业

基于Ubantu、Docker安装Vue+nodejs的Web项目一、项目概述前端技术栈基于vuei的SPA项目vueelementuiaxios后端技术栈二、环境部署安装dockersudo apt-get install docker.io安装K8sapt-get install entables iptables libxtables12...

源0.0

2238人浏览 · 2021-01-11 22:34:00

源0.0 · 2021-01-11 22:34:00 发布

基于Docker部署Web项目

1.实验目的

学会使用docker部署基于Vue的SPA项目
掌握docker，mysql，nodejs，vue和git的基本命令
掌握反向代理，负载均衡，数据库还原等操作

2.实验内容

本机所使用的环境为Centos7.5
在这里插入图片描述
人员分工：

2.1 安装项目所需环境

安装Docker Engine-Community

在新主机上首次安装 Docker Engine-Community 之前，需要设置 Docker 仓库。之后，您可以从仓库安装和更新 Docker。

设置仓库
安装所需的软件包。yum-utils 提供了 yum-config-manager ，并且 device mapper 存储驱动程序需要 device-mapper-persistent-data 和 lvm2。

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

在这里插入图片描述

使用以下命令来进行稳定仓库

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

启动docker

sudo systemctl start docker

通过运行 hello-world 映像来验证是否正确安装了 Docker Engine-Community 。

sudo docker run hello-world

在这里插入图片描述
首次会自动拉取该镜像，使用docker ps进行查看

拉取nginx镜像

查看本地镜像
服务器开启8080端口

安装mysql

yum install mysql
yum install mysql-server
yum install mysql-devel

mysql-server会安装失败，查资料发现是CentOS 7 版本将MySQL数据库软件从默认的程序列表中移除。
解决办法：从官网进行安装

wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
rpm -ivh mysql-community-release-el7-5.noarch.rpm
yum install mysql-community-server

启动mysql

service mysqld restart

设置mysql的密码

set password for 'root'@'localhost' =password('password');

配置mysql
mysql配置文件为/etc/my.cnf 最后加上编码配置

[mysql]
default-character-set =utf8

设置远程连接

mysql> grant all privileges on *.* to root@'%'identified by 'password';

安装nodejs

sudo yum install nodejs -y

下载nodejs管理工具n

npm install n

下载nodejs稳定版本，并使用

 n stable
 n 版本号

在这里插入图片描述

下载稳定版本vue(3.6.0)

2.2 项目上传到服务器

方法一：vscode

Vscode提供了一种十分方便的工具来远程控制你的服务器：remote-ssh，在插件商店里下载并且安装，就可以连接到你的服务器，支持拖曳式上传。

方法二：git

通常在写前端项目时，会分为许多模块，每次写完一个模块即可上传一个分支，并合并到master里，最后拉取master到服务器上即可。

git clone 项目地址

方法三：SFTP

Sftp作为一个Linux上常用的运维工具，主要用于传输文件，具体命令如下

连接到服务器

sftp user@passwd

发送文件，其中src_dir是源文件路径，des_dir 是目标文件路径

put /src_dir /des_dir

下载文件

get /src_dir /des_dir

2.3 部署前端项目

进入到项目目录
下载相关依赖

npm install

项目打包

npm run build

在这里插入图片描述
打包后生成一个dist文件夹，所需里面的index,html文件

方法一: 通过映射本地文件的方式部署项目

至此简单的docker安装nginx并启动算是成功了，接下来就会产生一个疑问，如果我想修改nginx的配置怎么办，我想更改nginx中的资源文件怎么办？接下来给出一个最实用的办法，就是将容器中的目录和本机目录做映射，以达到修改本机目录文件就影响到容器中的文件。

1.镜像映射

本机创建实例文件夹如下图所示

/home
    |---shop
           |----nginx
                  |----conf.d
                  |----html

各文件夹内配置如下

在conf.d文件夹下新建default.conf文件
server {
    listen       80;
    server_name  localhost;
    # 更该配置，匹配/路径，修改index.html的名字，用于区分该配置文件替换了容器中的配置文件
    location / {
        root   /usr/share/nginx/html;
        index  index-test.html index.htm;
    }
}
在html中编写index-test.html，用以判断文件夹映射成功
<html>
  <body>
    <h2>it is html1</h2>
  </body>
</html>

启动nginx(8080)，映射路径
命令比较长，其实就是多加了两个参数，-v，-v的意思就是冒号前面代表本机路径，冒号后面代表容器内的路径，两个路径进行了映射，本机路径中的文件会覆盖容器内的文件。
nginx容器内的一些文件位置：
日志位置：/var/log/nginx/
配置文件位置：/etc/nginx/
项目位置：/usr/share/nginx/html

docker run -d -p 8080:80 -v /home/shop/nginx/conf.d:/etc/nginx/conf.d  -v /home/shop/nginx/html:/usr/share/nginx/html nginx

在这里插入图片描述

可以看出我们成功了

2.反向代理

此时静态页面网站已经部署上了，但是还是会显示一个端口8080出来，就十分不爽，怎么把端口干掉呢？而是换成XXXXX.com/demo1 或者 XXXXX.com/demo2这种效果呢？下面使用nginx的反向代理实现。

我们在conf.d2中配置另一个nginx容器的配置文件，文件内容如下：

server {
    listen       80;
    server_name  localhost;
    location /mutou {
        # 在该位置配置反向代理，将ip/mutou请求拦截，发送给8080端口，如果不是本机请使用公网ip
        proxy_pass   http://你的刚才的ip地址:8080/;
    }
}

再启动一个nginx(80)，专门作为反向代理映射，将本机80端口代理到nginx的80端口上，并映射两端的配置文件地址。

docker run -d -p 80:80 -v /home/shop/nginx/conf.d2:/etc/nginx/conf.d nginx

在这里插入图片描述

3.负载均衡

当有了反向代理后，自然而然就引出了负载均衡,下面简单实现负载均衡的效果，实现该效果再添加一个nginx，所以要增加一个文件夹。

/home
    |---shop
           |----nginx
                  |----conf.d
                  |----html
                  |----conf.d2
                  |----html3

启动nginx(8081)

docker run -d -p 8081:80 -v /home/shop/nginx/conf.d:/etc/nginx/conf.d  -v /home/shop/nginx/html3:/usr/share/nginx/html nginx

在这里插入图片描述

访问ip:8081
配置负载均衡，访问ip/demo1时，平均分发到8080端口和8081端口上，即it is html1和it is html3间接出现。

配置负载均衡，那就是配置在第二次的nginx上，就是反向代理的nginx上，我们去conf.d2文件夹下，修改default.conf文件，如下：
upstream group1{
    server 你的刚才的ip地址:8080;
    server 你的刚才的ip地址:8081;
}

server {
    listen       80;
    server_name  localhost;
    location /demo1 {
        proxy_pass   http://group1/;
    }
}

然后重启该容器，docker restart 容器id

查看效果
访问ip/shop，每次刷新页面，页面都会在html1和html3中进行切换，此时负载均衡的效果就实现了。
将vue项目dist文件夹下的Index.html进行映射
先把原来启动的8080端口的docker容器停止掉
然后启动

docker run -d -p 8080:80 -v $PWD/dist:/usr/share/nginx/html nginx

可以看到项目就部署成功了
在这里插入图片描述

方法二: 制作镜像

制作镜像的方法主要有两种：

通过容器生成镜像
使用Dockerfile生成镜像

我们这次采用的是Dockefile，通过这个文件打包出我们需要的镜像

先下载需要的基础镜像，我们这里需要的是nginx

docker pull nginx:latest

Dockerfile

FROM nginx:latest
# 指定基础镜像是nginx
RUN mkdir /root/dist
# 创建好文件夹
COPY ./dist /root/dist
# 将npm编译好的静态文件复制到镜像内部
COPY ./dist/Nginx/default.conf /etc/nginx/conf.d/default.conf
# 将写好的Nginx配置文件复制到对应的地方
EXPOSE 80
# 将容器的80端口暴露给宿主机
WORKDIR /root/dist
# 设定好默认的工作路径

Nginx的配置文件

server {
listen       80;
server_name  localhost;

#charset koi8-r;
access_log  /var/log/nginx/host.access.log  main;
error_log  /var/log/nginx/error.log  error;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

#error_page  404              /404.html;
# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
}

打包镜像

sudo docker build -tag test:v1 .

保存镜像到本地

sudo docker save test:v1 > test

以下是我们的项目文件结构

program/
└── Dockerfile
    ├── dist
    │   ├── css
    │   │   ├── app.a26ffee5.css
    │   │   └── chunk-vendors.4cae334f.css
    │   ├── favicon.ico
    │   ├── fonts
    │   │   ├── element-icons.535877f5.woff
    │   │   └── element-icons.732389de.ttf
    │   ├── img
    │   │   ├── iconfont.82d03b7e.svg
    │   │   └── logo.82b9c7a5.png
    │   ├── index.html
    │   ├── js
    │   │   ├── app.85b1e61c.js
    │   │   ├── app.85b1e61c.js.map
    │   │   ├── chunk-vendors.d075aa0a.js
    │   │   └── chunk-vendors.d075aa0a.js.map
    │   └── Nginx
    │       └── default.conf
    ├── Dockerfile
    └── test

其中test是从docker里导出的我们做的镜像，通过以下命令即可导入

sudo docker load < test

K8S/Kubernetes

K8S/Kubernetes社区为您提供最前沿的新闻资讯和知识内容

更多推荐

【深度】阿里巴巴万级规模 K8s 集群全局高可用体系之美

作者 | 韩堂、柘远、沉醉来源 | 阿里巴巴云原生公众号前言台湾作家林清玄在接受记者采访的时候，如此评价自己 30 多年写作生涯：“第一个十年我才华横溢，‘贼光闪现’，令周边黯然失色；第二个十年，我终于‘宝光现形’，不再去抢风头，反而与身边的美丽相得益彰；进入第三个十年，繁华落尽见真醇，我进入了‘醇光初现’的阶段，真正体味到了境界之美”。长夜有穷，真水无香。领略过了 K8s“身在江

K8S/Kubernetes

如何基于 K8s 构建下一代 DevOps 平台？

作者 | 孙健波（天元）导读：当前云原生 DevOps 体系现状如何？面临哪些挑战？如何通过 OAM 解决云原生 DevOps 场景下的诸多问题？云原生开发应用模型 OAM(Open Application Model) 社区核心成员孙健波将为大家一一解答，并分享如何基于 OAM 和 Kubernetes 打造无限能力的下一代 DevOps 平台。什么是 DevOps？为什么基于 Kub