基于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
扫一扫
1956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
