Docker развертывает статический проект vue

Docker

скажи это прямо

Я искал множество руководств по развертыванию проектов vue с помощью docker в Интернете, и многие из этих статей посвящены сначала выполнению проекта vue.npm run buildУпакуйте его локально, перенесите на свой склад, а затем перейдите на сервер, чтобы получить наш код и получитьdistфайл, а затем смонтируйте файл в контейнер docr. На самом деле, эта операция должна быть ошибочной, мы также должны поместить операцию упаковки в образ докера, чтобы она работала.

Шаги развертывания

Создайте новый в корневом каталоге проектаDockerfileдокумент:

  # resum Dockerfile

  #指定node镜像对项目进行依赖安装和打包
  FROM node:10.16.0 AS builder
  # 将容器的工作目录设置为/app(当前目录，如果/app不存在，WORKDIR会创建/app文件夹)
  WORKDIR /app 
  COPY package.json /app/ 
  RUN npm config set registry "https://registry.npm.taobao.org/" \
      && npm install
  
  COPY . /app   
  RUN npm run build 

  #指定nginx配置项目，--from=builder 指的是从上一次 build 的结果中提取了编译结果(FROM node:alpine as builder)，即是把刚刚打包生成的dist放进nginx中
  FROM nginx
  COPY --from=builder app/dist /usr/share/nginx/html/
  COPY --from=builder app/nginx.conf /etc/nginx/nginx.conf

  #暴露容器80端口
  EXPOSE 80

Как видите, здесь я также поставил операцию упаковки вDokcerfileдействовать внутри.

COPY --from=builder app/dist /usr/share/nginx/html/

Эта команда генерируется путем упаковки нас в образdistфайл в контейнереnginxниже веб-каталога.

COPY --from=builder app/nginx.conf /etc/nginx/

Эта команда должна поместить следующее в каталог нашего проекта.nginx.confСкопируйте файл в контейнерnginxКаталог файла конфигурации ниже, тем самым перезаписывая исходный файл конфигурации.
nginx.conf:

 #user  nobody;
 worker_processes  1;
 events {
     worker_connections  1024;
 }
 http {
     include       mime.types;
     default_type  application/octet-stream;
     sendfile        on;
     keepalive_timeout  65;

     #gzip  on;
     gzip on;
     gzip_min_length  5k;
     gzip_buffers     4 16k;
     #gzip_http_version 1.0;
     gzip_comp_level 3;
     gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
     gzip_vary on;
     
     # 设置简历项目
     server {
         listen  80;
         server_name www.xieyezi.com;
         location / {
             root /usr/share/nginx/html;   #站点目录
             index index.html index.htm;   #添加属性。 
         }
     
         location = /50x.html {
             root   /usr/share/nginx/html;
         }
     }
 }

Введите свой собственный сервер (мой сервер Ubuntu 18.04) и создайте файл в корневом каталоге.webсодержание. Затем войдите в этот каталог и используйте git, чтобы вытащить код нашего проекта в этот каталог.

  1. клонируйте свой собственный проект:git clone xxxx;
  2. В корневом каталоге проекта создайте новый текстовый файл:.dockerignore:
 .git
 node_modules
 npm-debug.log

Этот файл исключит файлы по трем указанным выше путям и скажет докеру не упаковывать эти три в файл образа.
3. Сделайте зеркало

docker image build -t [imageName]:1.0 .

После создания образа мы можем запустить его для контейнера:

docker run -p 8080:80 -d --name [containerName] [iamgeName]

Затем введите в консолиdocker psКоманда для просмотра информации о контейнере, которую мы только что запустили. Затем введите доменное имя для тестирования, и оно работает нормально.

Категории