Jak spustit Nuxt.js na DigitalOcean?

Jak asi víte, Nuxt.js je rámec pro vytváření aplikací Universal Vue.js. Největší výhodou Nuxtu je proto, že můžeme vytvořit aplikaci SSR (Server Side Renderings) a eliminuje mnoho problémů s SEO, které můžeme mít s jednostránkovými aplikacemi Vue.js, zejména s dynamicky (z API) načteným obsahem. Ale pokud chcete používat Nuxt.js s SSR, musíte mít prostředí node.js a to je trochu větší problém. Pokud můžeme umístit Vue.js SPA na téměř každý hosting, bez jakýchkoli požadavků, jsou hostování s node.js o něco méně populární a často vyžadují trochu odlišný přístup.

Osobně jsem si pro několik svých projektů vybral DigitalOcean. Toto je cloud computing platforma, kde si můžete vytvořit své kapičky - velikost virtuálních strojů založených na SSD.

OK ... Pokud máme nějaké základní informace, začněme!

Registrace a jak získat ZDARMA kredity pro začátek v DigitalOcean

Pokud nemáte účet na DO, zaregistrujte si jeden z této adresy URL - získáte 10 $ zdarma ... a také dostanu malý bonus, takže každý vyhraje! ;).

Můžete také navštívit tuto adresu URL: https://gitlab.com/snippets/1740855 a zkontrolovat promo kódy a vyplnit pole „Propagační kód?“. Poskytne vám nejméně dalších 10 $ kreditů zdarma.

Vytvořte novou kapku

Po dokončení registrace se přihlaste ke svému účtu a vytvořte novou kapičku. Navrhuji zvolit Ubuntu 18.04 a standardní kapku za 5 $ / měsíc - 1 GB, 1 VCPU a 25 GB by mělo stačit ke spuštění. V budoucnu můžete velmi snadno změnit velikost kapičky.

Vyplňte zbývající pole a počkejte na vytvoření kapičky.

Příprava prostředí

Předpokládám, že v tuto chvíli je vaše kapička již vytvořena a do SSH jste se k ní přihlásili. Předpokládám také, že všechny příkazy v další části této příručky spustíte jako uživatel bez oprávnění root, takže budeme používat `sudo` (pokud potřebujete více informací, podívejte se na tento tutoriál). Začněme…

Aktualizovat seznam balíčků:

aktualizace sudo apt-get

Nainstalovat node.js & npm:

sudo apt-get install nodejs npm

Pokud chcete nainstalovat přízi, spusťte tyto příkazy:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stabilní hlavní" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get aktualizace & & sudo apt-get instalační příze

Nyní přejděte do svého domovského adresáře:

cd ~

A vytvořte adresář pro projekt:

mkdir ./your-project-name

Nepochybně máte projekt Nuxt.js na místním počítači, takže jej nyní zkopírujte do tohoto adresáře. Otevřete nové okno terminálu a spusťte:

scp -r / cesta / k / váš / místní / projekt / * vaše uživatelské jméno @ : ~ / vaše-project-name /

OK, vraťte se na terminál, kde jste připojeni k kapičce, a zkontrolujte, zda soubory existují ve správném adresáři:

ls ./your-project-name

Měli byste vidět seznam souborů projektu.

Spuštění Nuxt.js

Nyní jsme vytvořili náš server s node.js a našimi soubory projektu. Pojďme spustit Nuxt.js!

cd ./your-project-name
npm run build
npm běh nuxt

Projekt by měl běžet na adrese: http: // localhost: 3000. Samozřejmě to bylo pouze pro test a potřebujeme více automatizace, protože svůj web nespustíte ručně pokaždé.

Použijeme PM2 - správce procesů node.js. Nainstalujte jej:

instalace sudo npm pm2 -g

A začít projekt do pm2:

pm2 start npm - start

Měl bys vidět:

Spusťte Nginx jako proxy server

Náš projekt Nuxt.js běží, ale je k dispozici pouze na localhostu kapičky. Musíme nyní serveru sdělit: „Hej, pokud někdo navštíví stránku my-domain.com, ukáže mu webovou stránku projektu Nuxt.js“. K tomu použijeme server Nginx:

sudo apt-get install nginx

Dále vytvoříme základní konfiguraci pro jeden projekt, ale v budoucnu ji můžete duplikovat a na jedné kapičce spouštět spoustu různých aplikací a domén node.js.

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

Do tohoto souboru vložte následující obsah (nezapomeňte změnit frázi „your-domain.com“ na skutečné doménové jméno):

server {
    poslouchat 80;
    poslouchat [::]: 80;
    index index.html;
    server_name your-domain.com;

    umístění / {
        proxy_pass http: // localhost: 3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $ http_upgrade;
        proxy_set_header Připojení 'upgrade';
        proxy_set_header Host $ host;
        proxy_cache_bypass $ http_upgrade;
    }
}

Nyní bude veškerý příchozí přenos na vaši doménu.com na výchozím portu http 80 přesměrován na localhost: 3000.

Nyní odeberte existující výchozí konfiguraci:

sudo rm / etc / nginx / sites-enabled / default

A propojte náš nový konfigurační soubor s adresářem, který je k dispozici:

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

Nakonec otestujte novou konfiguraci nginx a pokud je vše v pořádku, restartujte server nginx:

sudo nginx -t
sudo systemctl restart nginx

Dále jednoduše přidejte svou doménu do kapičky a užijte si svůj projekt Nuxt.js!

Poznámka

Pamatujte, že účelem této příručky není obecné použití zabezpečení DigitalOcean a kapiček, ale pouze instalace Nuxt.js. Pokud jste zcela novým uživatelem DO, dám vám několik odkazů na další průvodce, které stojí za přečtení:

  • Počáteční nastavení serveru s Ubuntu 18.04
  • Jak přidat SSH Keys do kapiček
  • Domény a DNS
  • Jak zabezpečit Nginx pomocí Let's Encrypt na Ubuntu 18.04