手把手教学docker部署vue项目

Posted 2021-10-24 嘴巴嘟嘟

前端不前端，不能只局限于写界面，我们还需要把项目部署到服务器，亲自感觉一下项目部署到发布具体的流程，下面是我使用docker部署vue项目中的具体步骤

准备阶段

首先我们需要准备一台虚拟机linux 有网 结束

安装docker

具体安装docker步骤

首先进入宿主机终端命令行 启动docker

service docker start

安装nginx

1.取最新版的 Nginx 镜像
这里我们拉取官方的最新版本的镜像：

 docker pull nginx:latest

2.查看本地镜像
使用以下命令来查看是否已安装了 nginx：

 docker images

3.运行容器
安装完成后，我们可以使用以下命令来运行 nginx 容器：

docker run --name nginx-test -p 8080:80 -d nginx

参数说明：

–name nginx-test：容器名称。
-p 8080:80： 端口进行映射，将本地 8080 端口映射到容器内部的 80 端口。
-d nginx： 设置容器在在后台一直运行。

安装node

1.启动docker服务
首先启动docker服务:systemctl start docker

2.获取node最新镜像
启动完成之后拉取node最新镜像：docker pull node:latest
然后开始等待，最后拉取完成会有相应的输出信息。

我们再通过命令确认下node是否拉取成功：docker images

到这里，node最新镜像已被成功拉取下来。

3.运行镜像
接下来我们就要运行镜像:docker run -i -t node /bin/bash

常用参数：

-i：容器的标准输入保持打开
-t：让docker分配一个伪终端并绑定到容器的标准输入上
-p : 端口映射 格式为[主机端口：容器端口]
-d : 后台模式运行
-name : 给容器的起一个名字
-v：挂载主机的目录

这样node镜像就已经被成功启动起来啦，接下来我们看一下node的版本号：node -v

4.查看版本号

至此，docker中已成功安装完node.js。

vue-cli的安装

npm install -g @vue/cli

准备工作完毕，我们开始
首先我们是要有创建好的vue项目

我自己使用的是vscode 创建好项目 然后 npm run build

会生成一个dist文件夹，然后在文件夹中创建

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

自定义构建镜像的时候基于 Dockerfile 来构建。 FROM nginx 命令的意思该镜像是基于 nginx:latest
镜像而构建的。 COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下 dist
文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。 COPY nginx/default.conf
/etc/nginx/conf.d/default.conf 命令的意思是将 Nginx 目录下的 default.conf 复制到
etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

然后我们使用dist文件中 上传到linux中 ，接下来配置linux

本地创建一个docker 文件
mkdir docker

创建 Nginx Config配置文件
在docker文件夹下创建 Nginx 文件夹，该文件夹下新建文件 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，所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

基于该 Dockerfile 构建 Vue 应用镜像
运行命令（注意不要少了最后的 “.” ）：

docker build -t vue-demo .

查看本地镜像，运行命令：

docker image ls | grep vuenginxcontainer

到此时我们的 Vue 应用镜像 vue-demo已经成功创建。接下来，我们基于该镜像启动一个 Docker 容器。
启动 Vue app 容器
Docker 容器Container： 镜像运行时的实体。镜像（Image）和容器（Container）的关系，就像是面向对象程序设计中的类和实例一样，镜像是静态的定义，容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等 。

基于 vue-demo镜像启动容器，运行命令：

docker run -p 3000:80 -d --name vueApp vue-demo

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

docker ps