服务器使用 Docker 从零部署 Vue 项目

前提

• 一台服务器 ( Linux 内核系统 - CentOS 8 为例 )，如果是本地装 docker 模拟的话，跳过此阶段
• 了解 docker 简单概念，Linux 简单操作

::: warning 注意
服务器保证可以正常连接访问，国内的已备案，并开放了端口
:::

题外话-服务器重装系统（以阿里云为例）

1. 登录阿里云账号，右上角打开控制台
   

2. 找到云服务器 ECS（点击左侧栏目），停止服务器（实例）
   

3. 点击左侧实例，点击列表更多 > 云盘和镜像 > 更换操作系统
   

• 接下来进入正题

安装 docker

连接服务器，这里用的 xshell

• 打开 xshell，点击左上角新建，输入 IP 地址 > 账号 ( root ) 和密码（重装系统的时候设置的）

输入安装命令

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

检测是否安装成功

docker -v

::: tip 成功
显示版本号，安装成功
:::

配置 nginx web 服务器

下载 nginx 镜像

docker pull nginx:latest

启动一个来自于 nginx 镜像的 docker 容器

• 如何你已经有了 nginx 配置文件则省略此步骤，如何没有，则按以下步骤来复制默认配置

创建并启动临时的容器

docker run --name temp-nginx 8080:80 -d nginx

• 打开地址查看，ip:8080，如果有页面，则表示 nginx 部署成功，如果没有则表示部署失败或者 nginx 镜像下载失败
• 失败原因寻找：
  • nginx 镜像下载失败：命令 docker images 查看是否下载成功，没有则重新下载
  • 部署失败：命令 docker logs temp-nginx 查看错误日志信息

复制配置

• 新建存放目录 mkdir -p /docker/nginx
• 把配置复制到 /docker/nginx 目录下
  • docker cp temp-nginx:/etc/nginx/nginx.conf /docker/nginx
  • docker cp -a temp-nginx:/usr/share/nginx/html /docker/nginx
  • 其他文件如日志，可以后面自己再去操作，这里只做基本部署

删除临时容器

docker rm -f temp-nginx

修改 nginx.conf 配置

• vi /docker/nginx/nginx.conf
• 注释 include /etc/nginx/conf.d/*.conf; 这段话，不然他会引入 conf.d 里的配置
  • 当然，如果你不想注释的话，可以参考上面的方法复制 conf.d 文件夹，后面记得加个映射就行
• 在原文件的基础上加上 server

👀 查看 nginx.conf 详情

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    keepalive_timeout  65;
    # 注释下面这段，不然他会引入conf.d里的配置
    # include /etc/nginx/conf.d/*.conf;
    # 文件里面所有的路径都要写容器里的路径，不要写本地路径，不然会找不到文件
    # 所以后面会把本地路径映射到容器路径
    # 比如 /usr/share/nginx/html 其实会访问 /docker/nginx/html 目录
    # 开启服务
    server {
        listen       80;
        server_name  biaov.cn;
        location / {
            # vue文件存放目录
            # 注意这里一定是容器路径，不能是本地路径
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }
    }
}

创建映射的容器

docker run -d --name nginx-http -p 80:80 -v /docker/nginx/html:/usr/share/nginx/html -v /docker/nginx/nginx.conf:/etc/nginx/nginx.conf nginx

上传 Vue 文件

• 这里使用 FlashFXP 上传，你也可以用 Xshell 的 ftp 上传
  

• 把 Vue 文件上传到这个目录即可

• 用域名或 ip 查看下，如 biaov.cn

::: tip 完成
部署完成
:::

• 题外话-部署 SSL 证书流程
• 阿里云下载 nginx 的 SSl 证书(域名要一致)
• nginx.conf 配置 443 端口（证书访问地址记得做映射）

server {
    listen       443 ssl;
    server_name  biaov.cn;
    ssl_certificate      /etc/nginx/cert/biaov/biaov.cn.pem;
    ssl_certificate_key  /etc/nginx/cert/biaov/biaov.cn.key;
    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;
    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

• docker 创建并开启 443 端口的容器

docker run -d --name nginx-https -p 443:443 -v /docker/nginx/html:/usr/share/nginx/html -v /docker/nginx/nginx.conf:/etc/nginx/nginx.conf /docker/nginx/certs:/etc/nginx/cert -v /docker/nginx/config:/etc/nginx/config nginx

• 参考教程: Docker 教程