带你使用Docker 来部署VUE项目
- 最近要搞前后端分离,需要使用K8s来部署服务,使用K8s之前本地得安装一个Docker,而我主要搞下前端,代码都码好了,就只剩下部署了,进入正题吧。
环境信息
- 系统:windows 10
- Docker安装文件:Docker Desktop Installer 文件下载地址
- 项目准备好
安装Docker
我用win10 安装Docker中间有点问题,看步骤直接一路操作就行,遇到问题可以看看跟我碰到问题是否一样,问题放在最后面
-
安装 Hyper-V,在左下角图标上右键以管理员身份运行 PowerShell,输入以下内容回车
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All
-
运行刚刚下载的Docker Desktop Installer.exe文件,一路Next安装,安装完成后右下角会有一个小鲸鱼的图标
-
打开 PowerShell 运行下面的命令看下是否成功运行
docker run hello-world
运行成功应该跟下图一样就算安装完成了
安装问题
安装过程没有遇到什么问题,但是在打开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项目。