Как да стартирате Nuxt.js на DigitalOcean?

Както вероятно знаете, Nuxt.js е рамка за създаване на Universal Vue.js приложения. Така че най-голямото предимство на Nuxt е, че можем да създадем приложение за сървър на визуализация на сървъра (SSR) и то елиминира много проблеми със SEO, които можем да имаме с приложенията за единични страници на Vue.js, особено с динамично (от API) заредено съдържание. Но ако искате да използвате Nuxt.js със SSR, трябва да имате среда node.js и това е малко по-голям проблем. Доколкото можем да поставим Vue.js SPA на почти всеки хостинг, без никакви изисквания, хостингите с node.js са малко по-малко популярни и често изискват малко по-различен подход.

Лично аз избрах DigitalOcean за няколко от моите проекти. Това е платформа за облачни изчисления, където можете да създавате капчици - вариращи, виртуални машини, базирани на SSD.

Добре ... Ако имаме някаква основна информация, нека започнем!

Регистрация и как да получите БЕЗПЛАТНИ кредити, за да стартирате на DigitalOcean

Ако нямате акаунт в DO, регистрирайте такъв от този URL адрес - ще получите 10 $ безплатно ... и аз също ще получа малък бонус, така че всички печелят! ).

Можете също да посетите този URL адрес: https://gitlab.com/snippets/1740855 и да проверите промо кодове за попълване на поле „Имате промо код?“. Това ще ви даде поне следващите $ 10 безплатни кредити.

Създайте нова капчица

Когато приключите с регистрацията, влезте в акаунта си и създайте нова капчица. Предлагам да изберете Ubuntu 18.04 и стандартната капчица за $ 5 / месец - 1 GB, 1vCPU и 25GB трябва да са достатъчни за стартиране. В бъдеще можете да преоразмерите капчицата си много лесно.

Попълнете останалите полета и изчакайте капчицата да бъде създадена.

Подготовка на околната среда

Предполагам, че в този момент капчицата ви вече е създадена и сте влезли в нея от SSH. Предполагам също, че всички команди в следващата част на това ръководство ще изпълнявате като потребител без root, така че ще използваме `sudo` (проверете този урок, ако имате нужда от повече информация). Да започваме…

Актуализиране на списъка с пакети:

sudo apt-get update

Инсталиране на node.js & npm:

sudo apt-get install nodejs npm

Ако искате да инсталирате прежда, изпълнете следните команди:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-ключ добавяне -
ехо "деб https://dl.yarnpkg.com/debian/ стабилен главен" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt - получите актуализация && sudo apt-get инсталирайте прежда

Сега отидете на вашата домашна директория:

cd ~

И създайте директория за проекта:

mkdir ./your-project-name

Несъмнено имате проект Nuxt.js на вашия локален компютър, така че го копирайте сега в тази директория. Отворете нов прозорец на терминала и стартирайте:

scp -r / път / към / вашия / местен / проект / * вашето потребителско име @ : ~ / вашето име на проект /

Добре, върнете се към терминала, където сте свързани с капчицата и проверете дали файловете съществуват в правилната директория:

ls ./your-project-name

Трябва да видите списък с файловете на проекта.

Стартиране на Nuxt.js

Сега създадохме нашия сървър с node.js и нашите файлове на проекти. Нека стартираме Nuxt.js!

cd ./your-project-name
npm run build
npm run nuxt

Проектът трябва да се изпълнява на адрес: http: // localhost: 3000. Разбира се, това беше само за тест и се нуждаем от повече автоматизация, защото няма да стартирате уебсайта си ръчно всеки път.

Ще използваме PM2 - мениджър на процеси node.js. Инсталирайте го:

sudo npm инсталиране pm2 -g

И започнете проекта до pm2 сега:

pm2 старт npm - старт

Трябва да видиш:

Стартирайте Nginx като прокси сървър

Нашият Nuxt.js проект работи, но той е достъпен само в localhost на капчици. Сега трябва да кажем на нашия сървър: „Ей, ако някой посети my-domain.com, му покажете уебсайт на проекта Nuxt.js“. Ще използваме Nginx сървър за това:

sudo apt-get install nginx

След това ще създадем основна конфигурация за един проект, но в бъдеще можете да го дублирате и да стартирате много различни приложения и домейни node.js по една капчица.

sudo nano /etc/nginx/sites-available/your-domain.com

В този файл поставете следното съдържание (не забравяйте да промените фразата "your-domain.com" на вашето реално име на домейн):

сървър {
    слушайте 80;
    слушайте [::]: 80;
    index index.html;
    име на сървър your-domain.com;

    местоположение / {
        proxy_pass http: // localhost: 3000;
        proxy_http_version 1.1;
        proxy_set_header Надстройка $ http_upgrade;
        proxy_set_header Връзка 'ъпгрейд';
        proxy_set_header хост $ хост;
        proxy_cache_bypass $ http_upgrade;
    }
}

Сега целият входящ трафик към your-domain.com по подразбиране http 80 порт ще бъде пренасочен към localhost: 3000.

Сега премахнете съществуващата конфигурация по подразбиране:

sudo rm / и т.н. / nginx / активирани / по подразбиране сайтове

И свържете нашия нов конфигурационен файл с наличната директория за сайтове:

sudo ln -sf /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/your-domain.com

Накрая тествайте нова nginx конфигурация и ако всичко е наред - рестартирайте nginx сървъра:

sudo nginx -t
sudo systemctl рестартира nginx

След това просто добавете вашия домейн към капчицата и се насладете на вашия Nuxt.js проект!

Забележка

Не забравяйте, че целта на това ръководство не е общо използване на DigitalOcean и капчици сигурност, а само инсталация Nuxt.js. Ако сте напълно нов потребител на DO, ще ви дам някои връзки към допълнителни ръководства, които си струва да прочетете:

  • Начална настройка на сървъра с Ubuntu 18.04
  • Как да добавите SSH ключове към капчици
  • Домейни и DNS
  • Как да защитим Nginx с шифроване на Let в Enbuct на Ubuntu 18.04