带你使用Docker 来部署VUE项目

  • 最近要搞前后端分离,需要使用K8s来部署服务,使用K8s之前本地得安装一个Docker,而我主要搞下前端,代码都码好了,就只剩下部署了,进入正题吧。

环境信息

  1. 系统:windows 10
  2. Docker安装文件:Docker Desktop Installer 文件下载地址
  3. 项目准备好

安装Docker

我用win10 安装Docker中间有点问题,看步骤直接一路操作就行,遇到问题可以看看跟我碰到问题是否一样,问题放在最后面

  1. 安装 Hyper-V,在左下角图标上右键以管理员身份运行 PowerShell,输入以下内容回车win图标

    Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All

  2. 运行刚刚下载的Docker Desktop Installer.exe文件,一路Next安装,安装完成后右下角会有一个小鲸鱼的图标dockerLogo

  3. 打开 PowerShell 运行下面的命令看下是否成功运行

    docker run hello-world

    运行成功应该跟下图一样就算安装完成了
    image.png

安装问题

安装过程没有遇到什么问题,但是在打开Docker的时候会提示WLS2错误,这个是因为电脑默认的是WLS,不是WLS2,需要安装WLS2才能继续用Docker,安装方法可以看微软官方的文档:WLS2安装文档

部署VUE-下载Nginx镜像

国内推荐将镜像地址改为阿里云镜像加速地址,阿里云这个镜像仓库地址貌似是个人私有的。可以去阿里云控制容器镜像下面查看自己的加速地址。
启动Docker后,运行 PowerShell 输入下面命令拉取Nginx镜像到本地

docker pull nginx

创建 Nginx Config配置文件

在项目根目录下创建文件 default.conf,内容如下:

server {
listen       80;
server_name  localhost;

#charset koi8-r;
access_log  /var/log/nginx/host.access.log  main;
error_log  /var/log/nginx/error.log  error;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
} 

这个配置文件定义了首页的指向为 /usr/share/nginx/html/index.html,所以我们可以一会 npm run build 把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

创建 Dockerfile 文件

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

基于该 Dockerfile 构建 Vue 应用镜像

运行命令(注意不要少了最后的 “.” )
-t 是给镜像命名,. 是基于当前目录的 Dockerfile 来构建镜像。

docker build -t projectname .

查看本地镜像,运行命令:

docker image ls | grep projectname

到此时我们的 Vue 应用镜像 projectname 已经成功创建。接下来,我们基于该镜像启动一个 Docker 容器。

启动 Vue app 容器

Docker 容器Container: 镜像运行时的实体。镜像(Image)和容器(Container)的关系,就像是面向对象程序设计中的类和实例一样,镜像是静态的定义,容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等 。
基于 projectname 镜像启动容器,运行命令:

docker run \
-p 9090:80 \
-d --name vueApp \
projectname
  • docker run 基于镜像启动一个容器
  • -p 9090:80 端口映射,将宿主的3000端口映射到容器的80端口
  • -d 后台方式运行
  • --name 容器名,查看 Docker 进程

此时访问 http://localhost:9090 应该就能访问到该 Vue 应用.

目前为止,已经通过 Docker 容器部署了一个VUE项目。

上一篇