如何通过Docker部署Vue项目?

由于前端部署,需要通过Docker进行部署。整理了Docker搭建、部署教程。

Docker环境搭建

Docker下载 通过Docker官网进行下载www.docker.com/products/do...

Docker安装

  1. 使用默认配置安装
  2. 跳过角色选择
  3. 不需要登录

Docker代理配置

进入设置页面中的Docker Engine,修改registry-mirrors,点击apply-restart即可

json 复制代码
"registry-mirrors": [
   "https://dockerproxy.com",
   "https://hub-mirror.c.163.com",
   "https://mirror.baidubce.com",
   "https://ccr.ccs.tencentyun.com"
 ]

现在执行docker info,可以查看到docker的一些信息,说明已经安装成功了。下面就对Vue项目进行配置

Vue项目配置

根目录添加Dockerfile文件

shell 复制代码
touch nginx.conf
ini 复制代码
user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

以上代码是对nginx的配置,比较重要的是,设置容器访问根目录:root /app

shell 复制代码
touch Dockerfile
lua 复制代码
.
├── README.md
├── dist
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── src
├── Dockerfile
└── vite.config.js

Dockerfile文件内,添加以下内容

shell 复制代码
# Dockerfile
FROM nginx  
RUN mkdir /app 
COPY ./dist/ /app
COPY nginx.conf /etc/nginx/nginx.conf

以上表示内容为,下载 nginx,在容器的根目录创建app文件夹,将本地打包的dist文件夹内容复制到app文件夹下,最后再将nginx的配置复制到ngnix的指定目录

构建容器镜像

erlang 复制代码
 docker build -t getting-started .

容器化部署

在容器镜像里面,可以看到刚构建的getting-started,点击该镜像配置端口号。

点击连接,可以访问刚部署的页面

Docker 常用命令

镜像构建脚本

shell 复制代码
docker build -t [镜像的名字及标签,通常 name:tag] -f [指定要使用的Dockerfile路径]  [ContextPath]

Docker 常用命令,基本都在GUI上操作,命令使用的不多

  1. 查看docker信息:docker info
  2. 启动docker服务:docker start
  3. 列出安装的镜像文件:docker images
  4. 删除镜像文件:docker rmi
  5. 下载官方提供的docker镜像:docker pull
  6. 运行镜像生成一个实例:docker run
  7. 终止实例的运行:docker stop
  8. 列出所有实例:docker ps -a
  9. 删除实例:docker rm
  10. 启动一个已经建立的实例:docker start

Dockerfile 常用指令

  1. FROM:指定基础镜像,后续的指令将在该镜像上执行。
  2. RUN:在镜像上执行 Linux 命令,并形成一个新的层。
  3. CMD:指定启动镜像容器时的默认行为,一个 Dockerfile 中只能有一个 CMD 指令。
  4. ENTRYPOINT:指定容器启动后执行的命令,可以覆盖 CMD 指令中的命令。
  5. ENV:设置环境变量。
  6. COPY:将文件系统中的文件复制到镜像中。
  7. WORKDIR:设置工作目录。
  8. EXPOSE:设置向外暴露的端口。
  9. VOLUME:设置容器与外界映射的目录。

其他

.dockerignore文件

.dockerignore 文件的作用是用于在构建 Docker 镜像时排除不需要包含在镜像中的文件和目录。它与 .gitignore 文件类似,是一个配置文件,列出了需要被排除的文件或目录。

使用 .dockerignore 文件可以减小镜像的体积、缩短构建时间,并避免将不必要的敏感信息打包进 Docker 镜像,提高安全性。例如,如果你的项目中包含一些敏感信息,如密码、密钥等,你可以将这些文件添加到 .dockerignore 文件中,以确保它们不会被包含在 Docker 镜像中。

.dockerignore 文件需要与 Dockerfile 文件处于同一个目录下,并且使用通配符或正则表达式来指定需要排除的文件或文件夹。只有在构建镜像时才会使用 .dockerignore 文件,对于容器的运行没有影响。可以通过构建命令来查看 .dockerignore 文件是否生效。

相关推荐
码农土豆1 小时前
PaddlePaddle飞桨Linux系统Docker版安装
linux·docker·paddlepaddle
编程百晓君2 小时前
一文解释清楚OpenHarmony面向全场景的分布式操作系统
vue.js
暴富的Tdy2 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se2 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
z千鑫2 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
生产队队长4 小时前
项目练习:element-ui的valid表单验证功能用法
前端·vue.js·ui
web137656076434 小时前
WebStorm 创建一个Vue项目
ide·vue.js·webstorm
秃头女孩y4 小时前
【React中最优雅的异步请求】
javascript·vue.js·react.js
小马哥编程7 小时前
原型链(Prototype Chain)入门
css·vue.js·chrome·node.js·原型模式·chrome devtools
娃哈哈哈哈呀11 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js