Strapi & Next.js & ProxyPass

Dokumentacja

https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html

Instalacja

npx create-strapi-app my-project –quickstart

Polecenie instaluje Strapi, z flagą quickstart m.in. używamy bazy sqlite (czyli baza jest w pliku .db). W celu dokładniejszej konfiguracji należy pominąć tą flagę (można wtedy zmienić bazę na MongoDB albo MySQL).

CLI

npm run develop

Uruchamia serwer developerski z włączonym auto reload

npm run start

Uruchamia serwer z wyłączonym auto reload

npm run build

Buduje aplikację (potrzebne przy dodawaniu nowych modeli, pluginów, etc)

To są podstawowe polecenia, dokładne opisy, dodatkowe flagi, itd. opisane są w dokumentacji

Budowanie contentu

Strapi opiera się na budowaniu modeli (można to w dużym uproszczeniu porównać do WordPressowego page-name.php) oraz pojedynczych typów (analogicznie – single-name.php).

Modele

Przykładowy model do regulaminów na Melisanie.

Tworzymy nowy model, określamy po kolei pola i zapisujemy. Można to porównać do ACF w WP. W Strapi mamy np.: powtarzalne pola (to co ACF ma w wersji premium), pola tekstowe, json, numeryczne, relacyjne, itd.

Single types

Pojedyncze pola buduje się tak samo jak Modele z tą różnicą, że nie dodamy więcej niż jednego wpisu dla pojedynczego pola.

Co warto skonfigurować 

Edytor HTML

https://github.com/chiqui3d/strapi-tinymce

Domyślnie Strapi korzysta z edytora markdown, który może być problematyczny. Powyżej instrukcja jak podmienić standardowy edytor na TinyMce. Po wykonaniu wszystkich kroków z instrukcji trzeba wykonać builda.

Deployment

  1. Aplikację wrzucamy na serwer (pomijając, node_modules, .cache, build).
  2. Na serwerze instalujemy potrzebne paczki (npm i).
  3. Uruchamiamy (przez pm2 https://pm2.keymetrics.io/)

Next.js

Dokumentacja

https://nextjs.org/docs/getting-started

Instalacja

npx create-next-app

Tworzymy czysty, skonfigurowany projekt (analogicznie jak w create-react-app)

CLI

npm run dev

Uruchamia tryb developerski

npm run build

Buduje aplikację

npm run start

Uruchamia tryb produkcyjny

Dodatkowo po dodaniu do skryptu build komendy next export przy buildzie zostanie utworzony katalog out ze zbudowaną strukturą aplikacji. Pliki z tego katalogu wrzucamy na serwer i mamy gotową paczkę z danymi pobranymi w czasie builda. Wrzucenie tej paczki nie wymaga uruchamiania node’a na serwerze.

Ogólnie Next.js “jest Reactem” z dodatkowymi udoskonaleniami. Out of the box mamy routing (również dynamiczny), komponenty SEO, strukturę katalogową, zastrzeżone pliki takie jak _app.js, _document.js. Next ma bardzo czytelną dokumentację, polecam się zapoznać 🙂 

ProxyPass

Do poprawnego działania Strapi pod domeną z SSL’em potrzebne jest ustawienie ProxyPass w ustawieniach serwera. Na przykładzie Kylosa procedura wygląda następująco:

  1. Po zalogowaniu wchodzimy w “Własne konfiguracje HTTPD”
  2. Wybieramy domenę dla której chcemy ustawić ProxyPass.
  3. W pierwszym polu tekstowym wklejamy:
    ProxyRequests Off

ProxyPreserveHost On

ProxyPass / http://localhost:1339/

ProxyPassReverse / http://localhost:1339/

Powyższe polecenie pozwolą na przekierowanie panelu Strapi odpalonego na porcie 1339 na domenę, którą wybraliśmy w punkcie 2.

  1. Po zapisaniu trzeba zrestartować apacha przez SSH poleceniem – apachectl restart 

Dodaj komentarz