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

前提

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

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

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

  1. 登录阿里云账号,右上角打开控制台
    服务器使用 Docker 从零部署 Vue 项目_第1张图片

  2. 找到云服务器 ECS(点击左侧栏目),停止服务器(实例)
    服务器使用 Docker 从零部署 Vue 项目_第2张图片

  3. 点击左侧实例,点击列表更多 > 云盘和镜像 > 更换操作系统
    服务器使用 Docker 从零部署 Vue 项目_第3张图片

  • 接下来进入正题

安装 docker

连接服务器,这里用的 xshell

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

输入安装命令

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

检测是否安装成功

docker -v

服务器使用 Docker 从零部署 Vue 项目_第4张图片
::: 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 上传
    服务器使用 Docker 从零部署 Vue 项目_第5张图片

  • 把 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 教程

你可能感兴趣的:(Vue,JavaScript,docker,vue,nginx,服务器,部署web项目)