Рубрики
Uncategorized

Развертывание реагирования / Vue на виртуальной машине

Кубернаны были бы слишком сверх В марте я пытался изучить Nginx, балансировщик нагрузки, обратный прокси … Теги с WebDev, облаком, реагированием, дежоптом.

Кубернаны были бы слишком сверх

В марте я попробовал изучать Nginx, балансировщик нагрузки, обратный прокси и гораздо больше. В то же время я смотрел на покупку домена для моего портфолио. Сейчас пытаясь применить эту новую суперпулющую силу, которую я получил, я пытался развернуть его статическое резюме на виртуальной машине. Как я это сделал, продолжайте читать статью …

Шаг 1: Доберизировать свой сайт

Я использую Vite-Vue, чтобы сделать мой портфолио. Почему вы можете спросить, потому что я могу сломать разные разделы на компоненты, а также легче обновить информацию. Окончательная сборка компактна, и никто не может легко скопировать его легко (я не знаменитость, ни выдающийся инженер-программист).

Это мой файл конфигурации: Dockerfile Отказ Это будет работать с реагированием, Vue, угловой или любой структурой (надеюсь, что это работает для других)

FROM node:15.12.0-alpine3.10 as build-stage
WORKDIR /app
COPY . ./
RUN yarn install && yarn run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf
  • Если вы решаете эту статью, пожалуйста, чек версия Docker Base Image здесь Отказ
  • Также посмотрите на финальную папку сборки вашей рамки генерируют, для Vue его /св больше ничего не будет работать

Создать другой файл с именем .dockerignore.

**/node_modules
**/dist

Опять смотреть на /св

Создать файл с именем: nginx.conf Файл в Ваш каталог проекта , а не ваша виртуальная машина /etc/nginx

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;
    }
  }
}

Сохранить и совершать изменения

Создать виртуальную машину

Теперь это часть, где я полагаю, у вас есть виртуальная машина и иметь немного знаний об этом

  • Если вы используете AWS EC2, то создайте новую группу безопасности, давая доступ ко всем в порту 80
  • Если вы используете цифровой океан или подобное обслуживание, то я надеюсь, что это сделано для вас

После создания VM установите следующие

sudo apt-get install nginx nano letsencrypt
  • нано Для редактора вам также может понадобиться git.

Затем запустите: nginx -s перезагрузить И перейдите на внешний IP вашей виртуальной машины с помощью браузера, вы увидите страницу приветствия Nginx, если вы не можете, попробуйте перезапустить виртуальную машину или подождать 5 минут, есть некоторые проблемы с сетью.

Все сделано до сюда, отлично

Затем установите Docker

curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

Строительство контейнера Docker

  • Клонировать репо в вашу виртуальную машину
  • CD внутрь
  • Бегать
sudo docker build . -t resume
sudo docker run -d -p 8080:80 resume

Сделать это онлайн

Если у вас еще нет собственного доменного имени, продолжайте чтение в остальном Перейти к следующей части

  • Как администратор, удалите по умолчанию nginx.conf Файл в /etc/nginx папка
sudo rm -f /etc/nginx/nginx.conf
  • Создать новый nginx.conf в /etc/nginx каталог с помощью бега
sudo nano /etc/nginx/nginx.conf
  • Вы должны супер пользователя, чтобы использовать этот файл
  • Вставить следующий контент
http {
  server {
    listen 80;
    location / {
      proxy_pass http://127.0.0.1:8080/;
    }
  }
}

events { }

Сохраните свой файл, нажав Ctrl + O , подтверждая его и выйти нажав Ctrl + X.

потом бегать

sudo nginx -s reload

Вы переходите к внешнему IP вашей виртуальной машины, вы увидите свой сайт

Если у вас есть собственный домен

Запустите следующее, чтобы генерировать сертификат TEMP

sudo certbot certonly --standalone

Пройти все шаги

Ключи расположены по адресу:

/etc/letsencrypt/live/[ dns ]/fullchain.pem
/etc/letsencrypt/live/[ dns ]/privkey.pem

Открыть nginx.conf в /etc/nginx папка и заменить содержание с помощью {dns без http и www}

http {
    server {
        listen 80;
        listen 443 ssl http2;
        ssl_certificate /etc/letsencrypt/live/{dns without http and www}/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/{dns without http and www}/privkey.pem;
        ssl_protocols TLSv1.3;
        location / {
          proxy_pass http://127.0.0.1:8080/;
        }
    }

}

events { }

Беги sudo nginx -s перезагрузить и подождите и проверьте домен

Надеюсь, вам понравится, если вы найдете любую проблему, ошибка, пожалуйста, прокомментируйте ниже

Оригинал: «https://dev.to/dev117uday/deploying-react-vue-on-a-virtual-machine-52dj»

Читайте ещё по теме: