使用Docker Nginx部署vue项目

执行完成后，会在Vue项目下会生成一个dist目录，该目录一般包含index.html文件及static目录，static目录包含了静态文件js、css以及图片目录images（如果有图片的话）。Nginx是一个能在Docker容器中运行的HTTP(s)服务器。可以直接打开index.html查看效果，可能会出现各种原因的报错，适当的去解决。将项目上传到服务器后开始构建镜像(我是在服务器上从git

季布，

4269人浏览 · 2022-07-20 10:49:29

季布， · 2022-07-20 10:49:29 发布

Vue3 项目打包

打包 Vue 项目在根目录使用以下命令：

npm run build

执行以上命令，输出结果如下：
在这里插入图片描述
执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

可以直接打开index.html查看效果，可能会出现各种原因的报错，适当的去解决

Dockerfile

在根目录新建Dockerfile文件

# 基础镜像
FROM nginx
#创建app目录
WORKDIR /app
# 作者
MAINTAINER LX
#将打包后的dict目录复制到容器的app目录下
COPY ./dist/  /app
# 用自定义的nginx.conf 去覆盖镜像中原本的nginx.conf配置u文件
ADD ./nginx.conf /etc/nginx/nginx.conf
#暴露80端口，也就是会在服务器上的80端口提供你的Vue项目(这个端口可以设置为其他的，别和其他的端口重复就行)
EXPOSE 80

Nginx

在项目根目录创建 nginx.conf 文件
Nginx 是一个能在 Docker 容器中运行的 HTTP(s) 服务器。它使用配置文件决定如何提供内容、要监听的端口等

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       8080;       # 监听dockerfile提供的80端口
    server_name  localhost; #这里也可以写成localhost
    location / {  
      root   /app;   # dockerfile中创建的app,里面有打包后的dist文件
      index  index.html;
      try_files $uri $uri/ /index.html;  
    }
    error_page  404 /40x.html;
    location = /40x.html {
      root   /usr/share/nginx/html;
    }
    # 后端接口，反向代理  
    location /app/ {
       #  反向代理 访问App开头的路由会到这里  
       proxy_pass http://ip:port/app/;
    }
  }
}

构建你的 Docker 镜像

将项目上传到服务器后开始构建镜像(我是在服务器上从github上拉去的项目)
切换到镜像所在目录

sudo docker build -t dupchecking-vue:1.0 .

运行你的 Docker 镜像

这个例子基于官方 Nginx 镜像，因此已经设置了日志重定向并关闭了自我守护进程。它也提供了其他有利于 Nginx 在 Docker 容器中运行的默认设置。

# 访问服务器的80端口会映射到docker
 sudo docker run -d -p 0.0.0.0:80:80 镜像id
 #查看启动后
 curl localhost:80
 # <!DOCTYPE html><html lang=en>...</html>

vue-cli部署官网

上面的的部署方式需要在本地npm run build生成dist文件，如果代码做修改的话还得重新生成镜像
Dockerfile也可以这样写

FROM node:12

WORKDIR /app
COPY ./ /app
RUN npm install && npm run build

FROM nginx

RUN mkdir /app

COPY --from=0 /app/dist /app

ADD ./nginx.conf /etc/nginx/nginx.conf

使用docker compose 管理容器

version: "3.8"
services:
  duplicatech:
    build: .
    image: duplicatech:1.0.1
#    volumes:
#      - ".:/app:rw"
#      - "./nginx.conf:/etc/nginx/nginx.conf"
#    command:
#      - /bin/sh
#      - -c
#      - "npm run build"
    ports:
      - "8080:8080"
    container_name: "duplicatech"
    networks:
      - app_net
networks:
  app_net:

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^