通常来说，如果需要搭建一个网站，那么需要做很多的配置，例如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/{}/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/{}/install.sh | bash

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

3.nvm换源

1
2
3
4
5
6
-- 1. 打开环境配置文件
nano ~/.bash_profile 
-- 2. 输入以下环境配置，修改镜像为淘宝源
NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/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.npmmirror.com // 设置yarn镜像源为淘宝镜像

Docker

1.安装Docker的方法：

1
2
sudo su # 切换root用户
bash <(curl -sSL https://linuxmirrors.cn/docker.sh)

2.测试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条日志