Docker部署Vue程序

步骤

1.安装nginx

我们部署Vue程序依赖Nginx，首先拉取Nginx的镜像，这里使用Nginx最新的镜像

docker pull nginx

2.根据nginx镜像运行容器

docker run --name=nginx -d -p 4030:80 nginx

3.然后在浏览器里面访问4030端口，验证容器是否运行正常

出现上面的截图，说明容器运行正常。

4.打包Vue项目

npm run build

编译完成之后，在项目的根目录下面就会生成一个dist文件夹，里面是编译后的项目

5.添加Dockerfile文件

我们要构建镜像，必须依靠Dockerfile文件，我们在项目的根目录下面创建一个Dockerfile文件，没有后缀名，文件内容如下

# 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了
FROM nginx
# 定义作者 Kewen
MAINTAINER Kewen
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

6.上传文件

我们在Linux里面的创建文件夹，然后把dist文件夹和Dockerfile文件上传到该目录下

7.构建镜像

进入到dist和Dockerfile的文件夹里面

docker build -t parking-card-vue .

8.运行容器

docker run --name=parking-card-vue -d -p 8088:80 parking-card-vue

9.访问

可以看到Vue程序使用Docker部署就成功了。