Как создать VueJS PWA на высокопроизводительной, безопасной инфраструктуре NGINX

1656564490 kak sozdat vuejs pwa na vysokoproizvoditelnoj bezopasnoj infrastrukture

Томас Райнеке

Мне было очень интересно с тех пор как один из моих разработчиков представил концепцию Прогрессивные веб-приложения (PWA) несколько месяцев назад до меня. И наконец я удосужился немного запачкать руки 🙂

В этой статье описаны мои первые шаги и знакомство с PWA на высоком уровне на основе модного фреймворка VueJS, и прежде всего сосредоточены на его развертывании на хорошо защищенном сервере nginx.

Вот несколько лекций, которые я использовал, чтобы погрузиться в эту тему:

Прогрессивные веб-приложения | Интернет | Google Developers
Lighthouse, автоматизированный инструмент с открытым исходным кодом для улучшения качества ваших прогрессивных веб-программ, устраняет…developers.google.comНачало работы с PWA с помощью Vue – Pusher Blog
В этом учебнике ознакомьтесь с тем, как создать приложение для создания списка книг с прогрессивными веб-приложениями с помощью Vue для создания…blog.pusher.com

Вот примерная архитектура сценария, который мы собираемся создать. Как видите, это скорее традиционная локальная настройка, где я предполагаю, что вы владеете доменом, настроенным и указанным на ваш корневой сервер. В этой статье я не рассматриваю облачные развертывания:

T-Dt47h5nkWccQI90G4YG5diB99cLw177VQm
базовая архитектура

Подогрев и установка nginx

Давайте начнем с некоторых подготовительных работ, чтобы настроить инфраструктуру, которую мы будем использовать для развертывания позже:

  • Если у вас его нет, купите себе домен и корневой сервер и настройте записи DNS ваших доменов (для IPv4 и IPv6), чтобы они указывали на ваш сервер. Здесь я буду использовать свой личный веб-сайт www.thomas-reinecke.de в качестве примера.
  • На вашем сервере, и я предполагаю, что у вас есть доступ root/sudo, установите nginx (пример дистрибутивов Linux на основе apt, таких как debian или ubuntu).
sudo apt-get install nginx
  • создайте определение вашего сервера на /etc/nginx/sites-available/default который на данный момент может выглядеть достаточно простым
server {    server_name www.thomas-reinecke.de thomas-reinecke.de;    root /server/thomasreinecke/nginx;}
  • проверьте свою конфигурацию nginx, чтобы убедиться, что ее синтаксис в порядке, прежде чем двигаться дальше
> nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: configuration file /etc/nginx/nginx.conf test is successful

Настройте и защитите nginx

Поскольку мы планируем использовать сервисные работники PWA, ваша веб-программа должна работать только на HTTPS (в идеале также на HTTP/2). Кроме того, мы, безусловно, должны поддерживать попытки Google обеспечить более безопасный Интернет.

Начиная с июля 2018 с выпуском Chrome 68, Chrome будет обозначать все HTTP-сайты как «опасные».

К счастью, Let’s Encrypt предоставляет бесплатные SSL сертификаты для вашего веб-сервера, включая автоматическое обновление, и все, что вам нужно сделать, это должным образом защитить его.

  • установить certbot от Let’s Encrypt
sudo apt-get install certbot python3-certbot python-certbot-nginx python3-certbot-nginx
  • На основе исходной конфигурации вашего сервера nginx, которую мы сделали ранее, certbot предоставляет достаточно удобный способ создания сертификата для вашего сайта, включая переконфигурацию вашего сервиса nginx для поддержки SSL и перенаправления HTTP-трафика на HTTP.
sudo certbot --nginx -d thomas-reinecke.de -d www.thomas-reinecke.de
  • Он спросит вас, хотите ли вы, чтобы certbot перенастроил ваш экземпляр nginx.
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.--------------------------------------------------------------------1: No redirect - Make no further changes to the webserver configuration.2: Redirect - Make all requests redirect to secure HTTPS access. Choose this fornew sites, or if you're confident your site works on HTTPS. You can undo thischange by editing your web server's configuration.--------------------------------------------------------------------Select the appropriate number [1-2] then [enter] (press 'c' to cancel):
  • Выберите 2-й вариант и отпустите его. Ожидайте конфигурацию вашего сайта /etc/nginx/sites-available/default чтобы потом выглядеть так:
# HTTPS configuration of my siteserver {  server_name thomas-reinecke.de www.thomas-reinecke.de;  root /server/thomasreinecke/nginx;
  location / {    index index.html index.htm;  }
  listen <your_IP>:443 ssl http2;   ssl_certificate <path_to_fullchain.pem>;   ssl_certificate_key <path_to_privkey.pem>;   include /etc/letsencrypt/options-ssl-nginx.conf;   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; }
# HTTP configuration of my site, in any case redirecting to HTTPSserver {  if ($host = www.thomas-reinecke.de) {    return 301   } 
  if ($host = thomas-reinecke.de) {    return 301   } 
  listen <your_IP>:80 default;  server_name thomas-reinecke.de www.thomas-reinecke.de;  return 404; }
  • Я добавил http2 опция в области конфигурации HTTPs вашего сайта, это не будет поступать от certbot.

Более подробную информацию об этой процедуре (включая то, что вам нужно сделать, чтобы обновить сертификат) можно найти здесь.

Теперь пора запустить ваш сервер nginx, поэтому мы создаем простой index.html и повторно запускаем nginx, чтобы поднять его.

echo "Hello World!" > /server/thomasreinecke/nginx/index.htmlsudo systemctl reload nginx

Добро пожаловать, теперь у вас должна быть защищена веб-страница в Интернете. Любой доступ к HTTP будет автоматически перенаправлен на HTTPS. Теперь вы можете протестировать его, и вы получите А класс 🙂 Как это круто?

2ESrJyGkNj1Y-WYQq3Xp8LTuldlwnrTjuUUn

Создайте свой vuejs PWA и разверните его на nginx

Поскольку мы уже имеем готовую инфраструктуру целевого развертывания, пора создать ваш первый PWA на основе CLI vuejs.

# install vue cli, skip if you already have itnpm install -g vue-cli
# create vue app based on pwa templatevue init pwa <your_app_name>

На несколько вопросов, которые задает этот сценарий, укажите название своего проекта, а для остальных просто примите значение по умолчанию. Я не буду углубляться в фактические изменения приложения, которое создано только на основе шаблона. Вместо этого давайте сосредоточимся на аспекте развертывания и эксплуатации, чтобы запустить это в защищенной инфраструктуре nginx. Как следующие шаги, создайте свою программу, а затем переместите ее папку dist в корень nginx:

# build your vuejs pwa appcd <folder of your app>npm run build
# copy your dist folder onto your server running nginxscp -r dist/* <your_server>:/server/thomasreinecke/nginx/
# on your server restart nginx to refreshsudo systemctl reload nginx

Теперь ваш VueJS PWA должен работать на вашем сервере nginx:

xCyJM0HpJUk4RVI6UTAqTt6CSzHCBLhdShOf

Когда вы попадете на эту страницу с обычным URL HTTP, вы заметите перенаправление на HTTPs, чего мы и хотели. Теперь пора бежать Маяк Google против нашего сайта и посмотрите, как оно идет. Для более подробной информации:

Маяк | Инструменты для веб-разработчиков Google Developers
Узнайте, как настроить Lighthouse для аудита ваших веб-приложений.developers.google.com

Откройте Chrome > с помощью инструментов разработчика > Аудит > Выполнить аудит. Вот что мы получаем от этой установки – разве это не фантастически!?

SD-lwY9PNX3VtjWBxAw3BglL98MrZpaG7CoA

Вывод

В этой статье я показал, как настроить защищенную среду для запуска прогрессивного веб-приложения на основе VueJS на nginx-сервере. Должен признать, я думал, что это будет несколько труднее, но реальность такова: в общем-то мне понадобилось не более ~3 часов, чтобы добраться с нуля, что было довольно странно.

Настройка защищенной и высокопроизводительной инфраструктуры на самом деле не составляет большого труда, и я призываю всех, кто имеет дело с локальным развертыванием, погрузиться в это.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *