通常来说,如果需要搭建一个网站,那么需要做很多的配置,例如Nginx等等。使用Docker的话就可以非常方便的创建和管理不同的网页程序了。

准备工作

在开始之前,需要以下环境(版本仅供参考),操作系统(Linux arch 5.18.5-arch1-1):

  • node v18.4.0
  • Docker v20.10.17
  • @Vue/cli 5.0.8

node

推荐使用nvm管理node版本:

1.首先打开nvm的github,然后找到如下的命令,运行任意一条即可(注意版本号):

1
2
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

2.重新登录Linux就可以了。

3.nvm换源

1
2
3
4
5
6
-- 1. 打开环境配置文件
nano ~/.bash_profile
-- 2. 输入以下环境配置,修改镜像为淘宝源
NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node
-- 3. 执行以下命令,使其生效
source ~/.bash_profile

4.使用nvm安装node

1
2
3
4
5
6
7
8
-- 查看当前所有可以安装的版本
nvm ls-remote
-- 安装node v18.4.0
nvm install v18.4.0
-- 切换安装好的版本
nvm use v18.4.0
-- 测试版本
node -v

5.安装yarn
体验上比npm好,所以建议安装一个

1
2
3
4
5
npm install -g yarn
yarn --version
-- yarn换源
yarn config get registry // 查看yarn当前镜像源
yarn config set registry https://registry.npm.taobao.org/ // 设置yarn镜像源为淘宝镜像

Docker

1.安装Docker的方法有很多种,可以使用以下命令安装,运行任意一条即可

1
2
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
curl -sSL https://get.daocloud.io/docker | sh

2.换源
编辑/etc/docker/daemon.json文件

1
sudo nano /etc/docker/daemon.json

写入源地址,直接写就可以

1
2
3
4
5
6
7
8
9
{
"registry-mirrors" : [
"https://registry.docker-cn.com",
"http://hub-mirror.c.163.com",
"https://docker.mirrors.ustc.edu.cn",
"https://cr.console.aliyun.com",
"https://mirror.ccs.tencentyun.com"
]
}

3.测试docker是否正常工作

1
sudo docker run hello-world

看到Hello from Docker!等内容则为正常启动,如果有异常,查看systemd的docker服务是否正常启动。

4.只能sudo执行的问题
Docker的守护线程绑定的是unix socket,而不是TCP端口,这个套接字默认属于root,其他用户可以通过sudo去访问这个套接字文件。所以docker服务进程都是以root账户运行。
解决的方式是创建docker用户组,把应用用户加入到docker用户组里面。只要docker组里的用户都可以直接执行docker命令。

查看是否有docker用户组

1
cat /etc/group | grep docker

如果有,则跳过这一步,没有的话创建一个

1
sudo groupadd docker 

添加用户进docker,并更新用户组

1
2
sudo gpasswd -a $USER docker
newgrp docker

测试一下

1
docker ps -a

显示正常就不再需要sudo命令了。

Vue/cli

1.使用npm安装vue/cli,或者yarn等等也可以,运行任意一条即可:

1
2
yarn global add @vue/cli
sudo npm install -g @vue/cli

创建一个Vue项目

1.找个文件夹,创建一个Vue项目

1
vue create vuedemo

2.提示版本和包管理器,选择Vue 3还有yarn即可

3.启动Vue项目

1
yarn serve

根据提示,打开主机所在的ip和端口(默认8080)就可以访问啦。
docker-01-2022-08-29-21-55-10

4.开完完成之后构建项目

1
yarn build

这个构建命令会在目录底下生成一个dist文件夹,理论上只要将这个dist文件夹里面的内容部署成静态资源,就可以访问了。

静态资源站点

接下来需要部署一个静态资源的站点,在上一章高性能服务器与多并发里面提到epoll机制实现的多并发软件Nginx,就是此次需要部署的。
通过docker可以非常快速的部署一个Nginx服务器。

1.直接拉取最新的nginx镜像

1
docker pull nginx:latest

2.查看镜像docker images
docker-01-2022-08-29-21-21-54

3.在vuedemo目录下创建配置文件nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
server {
# 默认为 1,表示开启一个业务进程
worker_processes 1;

events {
# 单个业务进程可接受连接数
worker_connections 1024;
}


http {
# 引入 http mime 类型
include mime.types;
# 如果 mime 类型没匹配上,默认使用二进制流的方式传输。
default_type application/octet-stream;

# sendfile() 高效网络传输,也就是数据 0 拷贝。
sendfile on;

keepalive_timeout 65;

server {
# 监听端口号
listen 80;
# 虚拟主机名
server_name localhost;

# 匹配路径
location / {
# 文件根目录
root /usr/share/nginx/html;
# 默认页
index index.html index.htm;
}

# 错误码对应页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}

4.在vuedemo目录下创建Dockerfile文件

1
2
3
4
5
6
#使用nginx镜像
FROM nginx
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
#拷贝.conf文件到镜像下,替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf

5.构建容器

1
docker build -t vuedemo .

-t 表示指定镜像名字
. 表示在当前目录下构建

docker-01-2022-08-29-21-32-16

6.运行容器

1
docker run --name vuedemoaa -p 50080:80 -d vuedemo

–name vuedemoa 表示指定容器名字为vuedemoa
-p 50080:80 表示将容器的80端口映射为主机的50080端口
-d vuedemo 后台运行vuedemo镜像

7.访问页面
接下来只要访问主机所在的ip加端口号50080就可以访问页面了。

8.重新部署
假如对页面或者配置的内容做了修改,需要重新生成镜像重启容器

1
2
3
4
5
6
7
8
-- 停止容器
docker stop vuedemoaa
-- 移除容器
docker rm vuedemoaa
-- 重新生成
docker build -t vuedemoaa .
-- 运行容器
docker run --name vuedemoaa -p 50080:80 -d vuedemo

9.故障排查
在启动容器以后,可以通过docker ps -a查看容器的运行状态,如果是Exited那么就说明容器发生了错误,需要查看日志docker logs -f --tail=100 vuedemoaa

logs 查看日志
-f 持续打印日志
–tail=100 查看最近100条日志