【Docker篇】vue前端项目部署

简介: 首先打包编译生成一系列的静态文件(dist),然后把这些文件scp(放)到远程部署的服务器中,放完之后配置nginx指向到你存放静态资源的目录,完成nginx指向才能保证请求能访问到相应的资源

传统的前端部署方式


首先打包编译生成一系列的静态文件(dist),然后把这些文件scp(放)到远程部署的服务器中,放完之后配置nginx指向到你存放静态资源的目录,完成nginx指向才能保证请求能访问到相应的资源


可参考之前写的文章 🚀基于 Vue-cli 3x的项目部署


什么是Docker


Docker是一个虚拟环境容器,可以将开发环境、代码、配置文件等一并打包到这个容器中,最后发布应用


使用docker


通过将部署的操作集中成一个部署脚本完成传统的部署流程,通过在服务器上运行docker容器来运行前端应用


部署环境


  1. vue cli --version 3.3.0
  2. CentOS Linux release 7.7.1908
  3. docker-ce 社区版本


如何安装


yum install docker-ce


项目目录


微信截图_20220511100841.png


部署项目需要准备Dockerfile和nginx.conf


Dockerfile 配置


dockerfile是一个配置文件,用来让docker build命令清楚运行那些操作,创建dockerfile并编写相关配置


FROM node:latest as builder 
WORKDIR /app
COPY package.json 
RUN npm install   
COPY . .
RUN npm run build
FROM nginx:latest
COPY nginx.conf /etc/nginx
COPY --from=builder /app/dist  /usr/share/nginx/html
//ps: 每一个指令的前缀都必须是大写的。


  • ADD和COPY:   将文件或目录复制到Dockerfile构建的镜像中


  • EXPOSE:  指定运行该镜像的容器使用的端口,可以是多个。


  • RUN : 指令告诉docker 在镜像内执行命令


  • FROM :通过FROM指定的镜像名称,这个镜像称之为基础镜像,必须位于第一条非注释指令


  • WORKDIR:  在容器内部设置工作目录


Nginx.conf 配置如下


events {
    worker_connections  1024;
}
http{
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }   
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}


创建文件并编写后,用docker创建镜像


创建镜像


使用当前目录的 Dockerfile 创建镜像,标签为 frontend


docker build -t frontend .


  • -t :指定要创建的目标镜像


  • . :Dockerfile 文件所在目录,可以指定Dockerfile 的绝对路径


微信截图_20220511100859.png


微信截图_20220511100910.png


镜像成功生成


本地镜像


docker image ls | grep frontend


微信截图_20220511100931.png


出现结果则应用镜像 frontend 成功创建,然后我们基于该镜像启动一个Docker容器


用容器启动镜像


使用docker镜像frontend:latest以指定80端口映射模式启动容器,并将容器命名为frontend


docker run --name frontend -p 80:80 frontend:latest


  • -p: 指定端口映射,格式为:主机(宿主)端口:容器端口 将宿主的80端口映射到容器的80端口


  • --name: 为容器指定一个名称;

微信截图_20220511100943.png


完成 docker 部署


访问80端口,成功进入页面


其他常用docker命令


docker rm -f  [DOCKER...] //删除docker
docker ps -a // 查看所有容器
docker images // 查看所有镜像
docker rmi [IMAGE...] //删除镜像



相关文章
|
12天前
|
存储 测试技术 Linux
【Docker项目实战】使用Docker部署bender个人仪表板
【4月更文挑战第2天】使用Docker部署bender个人仪表板
23 1
|
21天前
|
存储 机器学习/深度学习 中间件
快速上手 Elasticsearch:Docker Compose 部署详解
本文介绍了如何使用Docker Compose快速搭建Elasticsearch学习环境。Elasticsearch是一款用于实时搜索和分析的分布式中间件,适用于多种场景,如搜索、日志分析、机器学习等。首先,创建docker网络,拉取最新版8.12.2镜像。接着,编写docker-compose.yml文件,配置单节点集群,设置端口映射、内存限制及数据卷挂载。然后,创建并配置数据卷目录,允许远程访问和跨域。最后,启动服务并验证,通过浏览器访问确认服务运行正常。本文为初学者提供了一个简便的Elasticsearch部署方法。
120 4
快速上手 Elasticsearch:Docker Compose 部署详解
|
13天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
67 0
|
2天前
|
测试技术 Linux 数据安全/隐私保护
【Docker项目实战】使用Docker部署Seatsurfing预订座位系统
【4月更文挑战第12天】使用Docker部署Seatsurfing预订座位系统
11 3
|
5天前
|
JavaScript 前端开发 Docker
全栈开发实战:结合Python、Vue和Docker进行部署
【4月更文挑战第10天】本文介绍了如何使用Python、Vue.js和Docker进行全栈开发和部署。Python搭配Flask创建后端API,Vue.js构建前端界面,Docker负责应用的容器化部署。通过编写Dockerfile,将Python应用构建成Docker镜像并运行,前端部分使用Vue CLI创建项目并与后端交互。最后,通过Nginx和另一个Dockerfile部署前端应用。这种组合提升了开发效率,保证了应用的可维护性和扩展性,适合不同规模的企业使用。
|
9天前
|
测试技术 Linux 数据安全/隐私保护
【Docker项目实战】使用Docker部署PicoShare共享文件平台
【4月更文挑战第5天】使用Docker部署PicoShare共享文件平台
43 4
|
14天前
|
测试技术 Linux Docker
Docker部署RPG网页小游戏
Docker部署RPG网页小游戏
43 2
|
16天前
|
Linux Shell 开发工具
CentOS8中Docker安装及部署
CentOS8中Docker安装及部署
62 0
|
17天前
|
关系型数据库 MySQL Nacos
【深入浅出Nacos原理及调优】「实战开发专题」采用Docker容器进行部署和搭建Nacos服务以及“坑点”
【深入浅出Nacos原理及调优】「实战开发专题」采用Docker容器进行部署和搭建Nacos服务以及“坑点”
41 1
|
21天前
|
Nacos 数据库 Docker
nacos常见问题之docker部署的seata,成功注册到nacos运行报错如何解决
Nacos是阿里云开源的服务发现和配置管理平台,用于构建动态微服务应用架构;本汇总针对Nacos在实际应用中用户常遇到的问题进行了归纳和解答,旨在帮助开发者和运维人员高效解决使用Nacos时的各类疑难杂症。
35 2