Docker + Nginx 部署 SPA 应用

发表于 2022-01-12 | 最后更新于 2022-01-14 | 开发

ps:本流程全程在 windows 机上运行。因为 docker 只支持运行在 linux 系统上,官方提供的 Docker Desktop 工具其本质属于先在虚拟机中安装 linux 然后再安装 docker,所以这里直接采用 windows 机器 + vmware 虚拟机的形式跑完流程,且事无巨细的记录流程步骤。

安装 vmware

下载并安装 vmware 虚拟机。

vmware 虚拟机下载地址:vmware 虚拟机

创建 linux 虚拟机

下载 centos7 镜像

前往 centos 官网下载一个 centos7 的镜像。

centos7 镜像下载地址:centos 7 清华源镜像

下载文件名为 CentOS-7-x86_64-DVD-2009.iso 的即可,大小约4.4G。

创建虚拟机

启动 vmware 。

选择创建新的虚拟机。

下一步,选择自定义 ,硬件兼容性选择 ESXi7.0 。

下一步,选择稍后安装操作系统。

下一步,客户机操作系统选择 Linux,版本选择 CentOS 7 64位。

下一步,命名虚拟机,此处可以自行决定虚拟机的名字和安装位置,本流程选择默认设置。

下一步,处理器配置,此处可以根据你的物理机硬件配置选择,本流程选择 2 核。

下一步,内存设置,依旧根据物理机配置选择,本流程选择 2048M。

下一步,网络类型,选择桥接网络。

下一步,I/O控制器,选择 LSI Logic(L)。

下一步,磁盘类型,选择 SCSI(S)。

下一步,磁盘,选择创建新虚拟磁盘。

下一步,指定磁盘容量,依旧根据物理机配置选择,本流程选择 50G,且将虚拟磁盘拆分成多个文件。

下一步,指定磁盘文件默认即可。

点击完成即可。

安装 centos7 系统

选中刚才创建的虚拟机,点击编辑虚拟机设置,选择 CD/DVD (IDE),右侧连接选择使用 ISO 镜像文件,并且选中刚才下载的 centos7 的镜像文件,点击确定。

点击开启此虚拟机。

接下来就是安装centos7系统。

语言选择默认英语。

下一步,点击 DATE&TIME 设置一下时区,切换到 Asia Shanghai,点击Done。

然后点击 SYSTEM 里的 INSTALLATION DESTINATION,Other Storage Options 选择 i will configure partitioning,点击Done。

接下来请按照实际情况给系统磁盘分配空间,把 / 下的空间留足即可,然后选择同意更改,点击Done。

然后点击 Begin Installation 开始安装系统。

接下来会读条安装系统,在此期间可以初始化一下系统用户的信息。

先设置一下 root 用户的密码,然后可以创建新的系统用户。

等待安装进度条读完,系统即安装完成,点击 Reboot 重启,即可进入系统。

docker 部署

进入系统后,我们使用 root 用户登录。

登录完成后,ping 一下百度,查看网络是否正常连接。

如果此处 ping 不通,请打开虚拟机设置-网络适配器,改为 NAT 模式,并且重启虚拟机,登录后,使用 vi 编辑 /etc/sysconfig/network-scripts/ifcfg-ens33 文件,将其中的 ONBOOT 设置为 yes,然后使用 systemctl restart network 命令重启网络服务。

确认虚拟机能够上网后,使用 ip addr 命令查看该虚拟机的 ip 地址。

接下来确认虚拟机处于开机状态,本流程不再直接在 vmware 上操作,而是采用类似 XShell 的工具远程连接。

本流程采用 SecureFX 8.3 连接远程 linux 虚拟机,并采用 SecureCRT 8.3 提供远程文件服务。

安装 docker

使用 SecureFX 8.3 远程工具并且使用 root 用户登入系统后,使用国内镜像安装 docker。

curl -sSL https://get.daocloud.io/docker | sh

启动 docker。

systemctl start docker

然后使用 docker images 命令检验是否启动成功。

docker images

如果没有报错,且输出一个空的镜像列表即为安装成功。

安装 nginx 镜像

下载 nginx 镜像。

docker pull nginx

默认会下载最后一个版本的 nginx ,然后使用 docker images 查看镜像列表。

挂载文件

根据此 nginx 镜像,我们就可以创建并且启动我们的容器了,但是在这之前,我们需要挂载宿主机的一些文件/文件夹到容器中去,因为部署我们的项目,一般是把我们打包好的 dist 目录 copy 到宿主机上,容器启动之后,一般是不需要动的,我们也需要把 nginx 的配置文件和日志文件挂载到宿主机上,方便修改和查看。

此处,我们挂载 nginx 下的 3 个目录:html、log、conf.d。

其中 log 存放输出日志文件、html 存放我们的打包目录 dist,conf.d 存放我们的 nginx 配置。

注意,此处我并没有把 conf 目录以及 nginx.conf 单独挂载,因为 nginx.conf 有配置类似 include conf.d/*.conf 这样的配置,意为导入了 conf.d 文件夹下所有的配置文件,那么这个入口文件其实没有什么太多需要更改的,我们只需要在 conf.d 文件夹内扩展我们自己的配置即可。如果有其他需求,自行挂载即可。

使用 SecureCRT 8.3 链接此虚拟机。

进入 /root 目录,创建一个 nginx 挂载目录,此处取名为 pathoinsight-nginx。

在 pathoinsight-nginx 目录下,新增 3 个目录:html、log、conf.d。

在本地物理主机上创建 pathoinsight.conf 配置文件,编写如下:

server {
  listen 80;
  server_name localhost;
  location / {
    root   /usr/share/nginx/html/dist/;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
    expires -1;
  }
}

将 pathoinsight.conf 文件上传至 /root/pathoinsight-nginx/conf.d/ 目录下。

然后将本地的 SPA 应用打包,生成 dist 文件夹,将该 dist 文件夹上传至 /root/pathoinsight-nginx/html/ 目录下。

html 目录下原本是有 index.html 和 50xhtml这两个文件的,本流程用不到该文件,所以暂且不管,如有需要,请自行 copy 过来即可。

conf.d 目录下默认也是有一个 default.conf 的默认配置文件,里面配置了 nginx 的欢迎页面,占用的是 80 端口,如果需要,也请自行 copy 过来,然后将上面我们自己的配置文件另选端口即可。

至此,挂载工作完成。

启动容器

直接在命令行启动是可以的,但是为了方便我们可以把命令编写成一个 .sh 文件交给虚拟机直接运行。

创建 pathoinsight.sh ,编写内容如下:

docker run --name pathoinsight-nginx -d -p 80:80 -v /root/pathoinsight-nginx/log:/var/log/nginx -v /root/pathoinsight-nginx/conf.d:/etc/nginx/conf.d -v /root/pathoinsight-nginx/html:/usr/share/nginx/html --privileged=true nginx

其中 -d 参数表示以守护进程形式运行,-p 参数表示宿主机与容器的端口映射,-v 参数表示文件挂载。

将该文件上传至虚拟机,并且运行该文件。

sh pathoinsight.sh

使用 docker ps 命令,可以查看容器列表,可以看到,我们刚才运行的容器已在其中。

容器已经成功启动,浏览器直接访问该虚拟机的 ip ,可以看到 SPA 应用启动成功。

以上。