Preskoči na glavni sadržaj

Kako pokrenuti projekat Codingmore🐱 na cloud serveru?

Chenmo Wang ErJava enterprise razvojSpring BootVue1722 reči6 minuta

Cloud server

Potreban nam je jedan cloud server; ja sam ranije besplatno dobio osnovnu verziju, 1 jezgro i 1 GB memorije, na kojoj je već instaliran aaPanel (BaoTa panel) (uputstvo za instalaciju potražite na linku)).

Ovo je konfiguracija servera prikazana na početnoj stranici aaPanel-a.

MySQL

Prijavite se na aaPanel, kliknite na „Database" → „Add Database", unesite ime baze; aaPanel će automatski kreirati nalog sa istim imenom kao baza. Obratite pažnju da za pristupna prava izaberete „Local Server".

U odeljku codingmore kliknite na „Import" → „Upload from local" i otpremite datoteku baze Codingmore-a. Nakon otpremanja kliknite na „Import".

DB datoteka se nalazi u direktorijumu coding-more/doc.

Preporučujem da prvo napravite backup — klikom na „No backup" → „Backup" možete preuzeti backup datoteku baze; ako kasnije želite da je vratite, dovoljno je kliknuti na „Restore".

Zapamtite korisničko ime i kopirajte lozinku, a zatim u stavci baze kliknite na „Management"

Nakon unosa korisničkog imena i lozinke kliknite na „Execute".

Tada ćete videti datoteku baze Codingmore-a.

Nginx

Nginx je visoko-performantni HTTP i reverse proxy web server, koji je u suštini postao jedan od obaveznih preduslova na svakom serveru.

Instalacija Nginx-a u aaPanel-u je prilično jednostavna — u Software Store pretražite „Nginx" i kliknite na „Install".

Redis

Instalacija Redis-a u aaPanel-u je takođe jednostavna — u Software Store pretražite „Redis" i kliknite na „Install".

Pakovanje projekta

1) codingmore-admin

Administrativni backend Codingmore-a; obratite pažnju na izmenu MySQL korisničkog imena i lozinke za producciono okruženje, u datoteci application-prod.yml.

Zatim u datoteci application.yml promenite active u prod (producciono okruženje).

Izmenite OSS konfiguraciju.

2) codingmore-web

Web frontend (portal sajta, prikaz članaka/detalja članaka itd.) Codingmore-a; obratite pažnju na izmenu MySQL korisničkog imena i lozinke za producciono okruženje, u datoteci application-prod.yml.

Zatim u datoteci application.yml promenite active u prod (producciono okruženje).

Sada možete dvoklikom na package u Maven panelu započeti pakovanje.

3) codingmore-admin-web

Frontend interfejs admin panela. U Visual Studio Code-u, prvo u terminalu izvršite yarn install da instalirate zavisnosti projekta.

Zatim izvršite yarn run build da izgradite statičke stranice codingmore-admin-web-a.

U korenskom direktorijumu projekta biće generisan dist direktorijum, koji sadrži izgrađene statičke stranice admin panela.

Pri pakovanju treba napomenuti dve važne stvari: u config direktorijumu postoje tri konfiguracione datoteke — dev.env.js sadrži konfiguraciju za razvojno okruženje, index.js je glavna konfiguracija, a prod.env.js je konfiguracija za producciono okruženje.

Da bismo poboljšali performanse sajta, treba isključiti source map, postaviti productionSourceMap: false, i istovremeno omogućiti kompresiju JS i CSS datoteka.

Tako će veličina zapakovanog fajla biti znatno manja, a vreme odziva mrežnih zahteva na serveru će se smanjiti.

Može se videti da je najveća JS datoteka 3.7 MB, dok je kompresovana verzija samo 662 kB — veličina je smanjena pet puta.

Otpremanje zapakovanih datoteka na server

U aaPanel-u kliknite na „FTP" → „Add FTP".

Kliknite na „Root directory"

Prebacite se na stranicu sa fajlovima.

Kliknite na „Upload", i u target direktorijumu izaberite dva jar paketa za otpremanje — admin i web.

Kliknite na „Start Upload"

I otpremite i statičke datoteke codingmore-admin-web-a.

Jednoklikni deploy

U Software Store pretražite ključnu reč „Java" i videćete plugin „Java Project One-Click Deployment 3.5" — instalirajte ga.

Uđite u panel „Java Project One-Click Deployment".

U panelu „Container Management" možete izabrati Tomcat 8 i instalirati ga; ako JDK nije instaliran, pri instalaciji Tomcat 8 podrazumevano će se instalirati JDK 1.8.

Uđite u Spring Boot panel, kliknite na „Add Project", zatim na ikonicu fascikle sa desne strane „Project Path" i možete otpremiti i deploy-ovati naš Spring Boot projekat.

codingmore-web (frontend sajta)

Prvo izaberite codingmore-web.

Unesite domen (domen Codingmore-a je codingmore.top), izmenite broj porta na 8081, kako je definisano u datoteci application.yml.

Kliknite na „OK".

Videćete da je servis već pokrenut — kliknite na „Log" da pogledate.

Nema problema.

Možete koristiti i terminal alatku na ovoj putanji da pogledate log.

U Security panelu proverite da li je port 8081 otvoren.

Nakon što potvrdite da je otvoren, u Chrome incognito modu unesite IP + broj porta.

Može se pristupiti i preko domena + broja porta.

codingmore-admin (admin panel sajta)

Ponovo uđite u „Java Project One-Click Deployment" Spring Boot panel i dodajte projekat codingmore-admin.

Sačekajte trenutak i pogledajte log.

Pokretanje je prošlo bez problema.

codingmore-admin je samo backend servis; interfejs je urađen u vue-u, pa sada možemo putem Swagger-a proveriti da li interfejs (API) može normalno da se pristupi.

Prvo dozvolite port 9002.

U adresnu traku pregledača unesite http://www.codingmore.top:9002/doc.html i videćete API dokumentaciju koju smo generisali pomoću Knife4j + Swagger.

OK, na ovaj način možemo proveriti da i admin servis radi ispravno.

Zatim, da bismo smanjili mogućnost napada na server, zatvorimo port 9002.

Nginx konfiguracija

codingmore-web

Iako je pristup preko domena + porta moguć, to nije elegantno — želimo da pristupamo direktno preko domena codingmore.top, šta da radimo?

Možemo koristiti Nginx za preusmeravanje portova.

Princip rada Nginx-a je sledeći: Nginx sluša na portu 80, a kada stigne HTTP zahtev, upoređuje HOST i ostale informacije HTTP zahteva sa konfiguracionom datotekom i preusmerava ga na odgovarajući port.

Na primer, kada korisnik pristupi codingmore.top, Nginx iz konfiguracione datoteke vidi da je to HTTP zahtev i preusmerava ga aplikaciji na portu 8081 na obradu.

upstream codingmore_web_pool{
    server 127.0.0.1:8081;
}

server {
    listen       80;
    server_name  codingmore.top;
    access_log logs/codingmore_web.log;
    error_log logs/codingmore_web.error;

    # Preusmerava sve zahteve na aplikaciju iz pool-a
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://codingmore_web_pool;
    }
}

Ovo je tzv. preusmeravanje portova: softver objedinjeno sluša određeni port (obično port 80) na određenom domenu, i kada domen i port zahteva ka serveru odgovaraju zahtevima, prema konfiguraciji se zahtev prosleđuje određenom Tomcat serveru na obradu. I Nginx, koji često koristimo, ima funkciju preusmeravanja portova.

OK, pošto smo razumeli princip, kopirajmo ovu konfiguraciju u Nginx konfiguraciju unutar aaPanel-a.

Kliknite na „Save".

Sada u pregledaču pristupite codingmore.top i moći ćete da dobijete sadržaj.

S obzirom na to, iskoristimo priliku i zatvorimo port 8081, čime se smanjuje mogućnost napada na server.

OK, time smo završili deploy codingmore-web-a, odnosno frontend servisa Codingmore🐱.

codingmore-admin-web

Datoteke zapakovane iz codingmore-admin-web-a su statičke, pa je dovoljno u Nginx dodati putanju za admin konfiguraciju.

upstream codingmore_web_pool{
    server 127.0.0.1:8081;
}

server {
    listen       80;
    server_name  codingmore.top;
    access_log /home/www/codingmore_web.log;
    error_log /home/www/codingmore_web.error;

    location /admin {
        alias /www/wwwroot/itwanger/dist/; # root direktorijum
        index index.html;
    }

    # Preusmerava sve zahteve na aplikaciju iz pool-a
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://codingmore_web_pool;
    }
}

U server smo dodali još jedan location za admin — to znači da kada pristupamo codingmore.top/admin, Nginx traži statičke datoteke u direktorijumu /www/wwwroot/itwanger/dist/.

Ovde da objasnimo razliku između root i alias:

  • root: stvarna adresa kojoj se pristupa je kombinacija root + tražena putanja, odnosno admin => /www/wwwroot/itwanger/dist/admin
  • alias: stvarna adresa kojoj se pristupa je /www/wwwroot/itwanger/dist

Obratite pažnju na razliku. Hajde da pristupimo codingmore.top/admin:

OK.

Codingmore🐱 je projekat sa razdvojenim frontendom i backendom — kako frontend zapravo pristupa backend API-ju? Da ukratko objasnimo.

Otvorite datoteku codingmore-admin-web/config/prod.env.js; u njoj postoji svojstvo VUE_APP_BASE_API čija je vrednost /api, što znači će frontend slati zahteve pod prefiksom putanje /api.

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_BASE_API: '"/api"'
}

Pošto naš codingmore-admin backend servis radi na portu 9002, to znači da u Nginx moramo dodati još jednu putanju koja će zahteve sa api prefiksom preusmeravati na port 9002.

OK, pogledajmo kompletnu konfiguraciju.

upstream codingmore_web_pool{
    server 127.0.0.1:8081;
}

upstream codingmore_admin_pool{
    server 127.0.0.1:9002/;
}

server {
    listen       80;
    server_name  codingmore.top;
    access_log /home/www/codingmore_web.log;
    error_log /home/www/codingmore_web.error;

    location /admin {
        alias /www/wwwroot/itwanger/dist/; # root direktorijum
        index index.html;
    }

    location /api/ {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://codingmore_admin_pool;
    }

    # Preusmerava sve zahteve na aplikaciju iz pool-a
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://codingmore_web_pool;
    }
}

OK, prijavite se na admin panel i videćete našu stranicu za upravljanje člancima.

Domen sajta