Docker 部署前端项目流程
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Docker 部署前端项目流程相关的知识,希望对你有一定的参考价值。
参考技术Adocker images --- 查看所以镜像
docker search 镜像名 --- 搜索相关镜像
docker images | grep 镜像名模糊搜索
docker pull(-a) 镜像名:版本号 --- 拉取镜像,-a pull all
docker push 192.168.0.100:5000/ubuntu --- 推送镜像库到私有源
docker rmi(-f) 镜像名:版本号/镜像 ID --- 删除镜像 (加上 -f 参数 强制删除)
docker rmi $(docker images -q) --- 删除所有镜像
docker ps --- 查看所以的容器
docker ps -a --- 查看所有容器的状态
docker exec -it 容器 name /bin/sh --- 进入容器
exit --- 退出容器
docker start/stop id/name[name...] --- 启动/停止某个(多个)容器
docker kill name[name...] --- 强制中断
docker restart name[name...] --- 重启
docker pause name --- 暂停
docker unpause name --- 继续
docker rm name[name...] --- 移除容器
docker rmi (-f) name[name...] --- 移除镜像(-f:强制移除运行中容器)
一键删除所有 tag 为 none 的镜像
第一步:连接远程镜像仓库 (docker login ip 地址:端口号)
第二步:获取远程仓库中的镜像 (docker push 镜像名)
第三步:获取仓库中所有镜像 (docker images )
第四步:编写自己的 dockerfile 文件
第五步:build 当前镜像中的 dockerfile 文件,生成新的 dockerfile 文件。 (docker build -t 镜像名:tag . )
第六步:本地测试是否 build 成功 【本步骤可省略】, (docker run -p 8081:80 -d --name 容器名 镜像名:tag)
第七步:查看当前运行的容器 (docker ps )
第八步:测试成功后上传镜像, (docker push 镜像名:tag)
第九步:查看仓库中的所有镜像 (docker images)
本地环境
最后终端出现
手把手教学docker部署vue项目
前端不前端,不能只局限于写界面,我们还需要把项目部署到服务器,亲自感觉一下项目部署到发布具体的流程,下面是我使用docker部署vue项目中的具体步骤
准备阶段
首先我们需要准备一台虚拟机linux 有网 结束
安装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
以上是关于Docker 部署前端项目流程的主要内容,如果未能解决你的问题,请参考以下文章