Hostowanie aplikacji vue

Hostowanie aplikacji vue
Michał Kowal
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad 5 lat
  • Postów:21
0

Cześć!
W tej chwili kupiłem sobie serwer vps na znanej polskiej stronie oferującej takie usługi jak i domenę u nich. Jako, że nigdy nie tworzyłem takiej strony i nie hostowałem aplikacji, musiałem podążać za tutorialem. W każdym razie, wrzuciłem na debiana folder z gita jak i również użyłem do hostowania "pm2", poprzez komendę:

pm2 start npm -- run serve

Jednak nie wiem teraz, jak ustawić domenę, bo w tej chwili z nazwa.pl gdy ustawię tam domenę by przekierowywała na adress ip, to to robi, jednak chciał bym aby nie było tego 1111.333.2222.444:8080, tylko adres domeny. :)
Może mi ktoś pomóc? Dziękuję bardzo z góry!

edytowany 1x, ostatnio: Michał Kowal
mr_jaro
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
0

Szczerze to nigdy nie hostowałem apek frontowych przez wbudowane serwery bo one do tego nie służą. Tzn do deva się nadają, ale produkcyjnie to już tylko nginx lub apache.


It's All About the Game.
Michał Kowal
no właśnie mam na tej maszynie już zainstalowanego appache, także mogę go do tego użyć? (mogę na przykład hostować parę stron na tej samej maszynie?).
mr_jaro
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
0

Komentarze służą do offtopu, o głównym wątku pisz w postach.

Tak możesz użyć apacha i możesz hostować wiele stron na różnych domenach/subdomenach/folderach. Oczywiście jeśli twoja apka jest poprawnie zrobiona to powinna mieć możliwość budowania przez npm np "npm build prod" lub coś podobnego tak by zbudować pliki do hostowania na apachu.


It's All About the Game.
edytowany 1x, ostatnio: mr_jaro
IK
  • Rejestracja:ponad 7 lat
  • Ostatnio:prawie 2 lata
0

Musisz dodać rekord typu A w DNSach zamiast przekierowania na IP, wtedy w przeglądarce elegancko będzie się wyświetlała nazwa domeny.
Apkę zbuduj i serwuj zbudowane pliki przez Apache czy nginxa,
Swoją drogą, czemu nie skorzystasz z heroku czy netlify?

mr_jaro
przynajmniej się nauczy obsługi vpsa która i tak mu się przyda
Michał Kowal
A jakie są plusy korzystania z tego? (Kupiłem wcześniej vps na nazwa.pl i nie wiedziałem nic z tego zakresu tematycznego)
Michał Kowal
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad 5 lat
  • Postów:21
0

Czyli reasumując:

  • budujeę apke i folder dist muszę wrzucać do htdocs
  • potem muszę się odnosić do pliku index.html w dist
  • w domenie konfiguruje DNS w ten sposób żeby wskazywał na adres IP aplikacji

No i mam pytanie: na appache adresy różnych aplikacji będą na różnych portach czy jak? (Przepraszam bardzo ale nawet nie wiem czego szukać w google :( )

KE
Pamiętaj że na zmiany w DNS trzeba czasem poczekać, aż nowe rekordy rozpropagują się. Szukaj w google haseł "apache virtual host", "apache multiple domains".
Michał Kowal
Dzięki za te uwagi, poszukam :)
mr_jaro
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
1

Poszukaj jak się konfiguruje virtual hosta, tam wszystkiego się dowiesz.

Co do samego budowania to nie musisz wrzucać dista, możesz mieć tam cały kod pobrany np przez gita, zbudować apke na serwerze, a root folder w virtual host ustawiasz na katalog dist.


It's All About the Game.
Michał Kowal
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad 5 lat
  • Postów:21
0

A co sądzicie o ngnix? Może on zastąpić appacha?

mr_jaro
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
0

Oba służą do tego samego, tylko apache jest prostrzy w obsłudze, a nginx odrobinę wydajniejszy.


It's All About the Game.
IK
  • Rejestracja:ponad 7 lat
  • Ostatnio:prawie 2 lata
0
Michał Kowal napisał(a):

A co sądzicie o ngnix? Może on zastąpić appacha?

Do twoich potrzeb nie ma różnicy. Osobiście wolę nginxa.

Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:około 7 godzin
  • Lokalizacja:Laska, z Polski
  • Postów:10037
0

Ogólnie to takie apki jak np we Vue buduje się do plików index.html, plików *.css oraz *.js i po prostu wkłada się na server.

Jeśli korzystasz z vue-cli to będzie to:

Kopiuj
vue-cli-service build

Jeśli nie, otwórz swój plik package.json, zobacz czy w obiekcie "scripts" masz tam klucz jak "build", "prod" albo "production". One powinny Ci wygenerować te statyczne pliki które po prostu wrzucisz na server.

Michał Kowal
Nie wiem czy ma to związek. Ale jak budowałem apkę vue przez 'npm run build' to tworzył mi się folder dist, z plikami itd., jednak po odpaleniu index.html to w przeglądarce, wywalało dużo wyjątków o to, że nie może odnaleźć plików.
IK
Z tego co pamiętam popularne przeglądarki nie pozwalają plikom .html odpalonym z dysku pobierać jakichkolwiek innych plików z dysku. Spróbuj w katalogu dist odpalić jakiś live server, albo jak masz pythona to python -m SimpleHTTPServer (py2) lub python -m http.server (py3) i wejść na localhost:8000
Michał Kowal
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad 5 lat
  • Postów:21
0

To ja z kolejnym pytaniem:
Postanowiłem podążać za tym tutorialem:

https://medium.com/@thucnc/deploy-a-vuejs-web-app-with-nginx-on-ubuntu-18-04-f93860219030

I doszedłem do punktu w którym instaluje nginx. Gdy każą wejść na stronkę i sprawdzić tą powitalną wiadomość wyskakuje mi powitanie: "Apache is functioning normally". Dodam, że od mojej ostatniej wiadomości dokonałem reinstalacji całej maszyny, i przeszedłem sobie z debiana na ubuntu 18

IK
  • Rejestracja:ponad 7 lat
  • Ostatnio:prawie 2 lata
1

Na ubuntu domyślnie jest odpalone Apache. Wyłącz go, a najlepiej w ogóle wywal :)
http://xmodulo.com/how-to-uninstall-and-remove-apache2-on-ubuntu-debian.html

Michał Kowal
Super! Działa, mega dzięki za pomoc!
Riddle
Administrator
  • Rejestracja:ponad 14 lat
  • Ostatnio:około 7 godzin
  • Lokalizacja:Laska, z Polski
  • Postów:10037
0
Michał Kowal napisał(a):

Nie wiem czy ma to związek. Ale jak budowałem apkę vue przez 'npm run build' to tworzył mi się folder dist, z plikami itd., jednak po odpaleniu index.html to w przeglądarce, wywalało dużo wyjątków o to, że nie może odnaleźć plików.

Możliwe że porypały Ci się pathy relatywne, ustal czy na pewno masz ustawiony basepath na / i czy na pewno odpalasz to przez server, tak że widzisz np localhost/index.html, a nie file://C:/bla/bla/bla/index.html.
Jeśli masz zainstalowane php to możesz zrobić

Kopiuj
cd dist
php -S localhost:8080
edytowany 2x, ostatnio: Riddle
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)