Select Page

Tässä ohjeessa oletetaan, että olet onnistunut luomaan toimivan projektin Ionicilla, tässä tutoriaalissa se laitetaan Firebaseen, joka mahdollistaa sovelluksen jakelun ympäri internettiä ilmaiseksi.

Julkaise sovellus Firebaseen PWA:na, ja asioiden muuttumisen tehtyä tämän ohjeen vanhentuneeksi, löydät tuoreempia ohjeita hakusanoilla “ionic + pwa + firebase + hosting“. Asiat muuttuvat jatkuvasti, ja suurin piirtein jokaisessa ohjeessa on yksi tai useampi yksityiskohta, joka ei vastaa todellisuutta ihan tarkalleen uusien päivitysten johdosta. Siksi on tärkeää osata googlata oikeilla hakusanoilla ongelmia kohdattaessa.

Aivan aluksi käy luomassa Firebase-projekti Firebase Consolessa.

Asenna Firebase-työkalut terminaaliemulaattorissasi, jotta projekti voidaan siirtää koneeltasi Firebaseen.

sudo npm install -g firebase-tools

Kirjaudu komentorivityökaluilla Firebaseen, jotta komentorivityökalulla on oikeudet tehdä muutoksia Firebase-projekteihisi.

firebase login

Yllä olevan kuvan mukaisesti, kannattaa antaa Firebasen kerätä statistiikkaa työkalunsa käytöstä, mikäli sinulla ei ole erityisiä perusteita olla antamatta sitä. Homma toimii kyllä vaikka statistiikan keräämisen kieltäisikin, mutta kännykkäsi on tietoturvanäkökulmasta aivan nekstin levelin riski. Statistiikan kerääminen aidosti auttaa työkalun kehittämisessä, eikä Firebasen komentorivityökalun ole perusteltua olettaa keräävän kovinkaan kyseenalaista dataa.

Seuraavassa kohtaa kohtaa ohjetta oletetaan, että sinulla on luotuna Ionic-projekti sijaintiin ~/Downloads/sovellus-esimerkki. Luodaan kyseiseen hakemistoon tarvittavat asetukset ja määritykset, joiden perusteella projekti saadaan Firebaseen.

cd ~/Downloads/sovellus-esimerkki && firebase init

Yllä olevan komennon pitäisi avata tekstipohjainen monivalintapeli, jonka voi pelata läpi monellakin tapaa, mutta tässä ohjeessa oletetaan, että noudatat seuraavaa strategiaa. Kysymykseen “Which Firebase CLI features do you want to set up for this folder” vastaa “Hosting”. Seuraavassa, “Project Setup” -vaiheessa tulisi vastata “Use an Existing Project” ja valita aiemmin Firebaseen selaimella luomasi projekti.

Public-hakemistoksi kannattaa asettaa build, ei www. Vastaa kysymyksiin seuraavasti.

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File build/index.html already exists. Overwrite? Yes
✔  Wrote build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

Mikäli et ole asentanut projektin luontivaiheessa Capacitor-valmiutta projektiin, voit asentaa sen seuraavilla komennoilla.

npm install @capacitor/cli @capacitor/core --save

Tee web-sovellusversio seuraavalla komennolla.

npx cap init --web-dir="build"

Buildaa sovelluksesta jakeluversio.

npm run build && npx cap copy

Sitten voitkin laittaa sovelluksen internettiin:

firebase deploy

Sitten pitäisi tulla konsoliin linkki sovellukseesi, avaa se selaimessasi.

Jatkossa, kun nämä tässä tutoriaalissa läpi käydyt konfiguroinnit on hoidettu alta pois, saat projektin uusia versioita maailmalle “npm run build”, “npx cap copy” ja “firebase deploy”. Jos haluat automatisoida tämän niin että nuo komennot ajetaan sinun komentaessasi vain “npm run deploy”, voit kirjoittaa automaation projektin juurihakemistossa olevaan package.json-tiedostoon lisäämällä scripts-objektiin tällaisen deploy-avaimen ja sille arvoksi haluamasi komennot. Tällöin scripts-osio voisi näyttää vaikka seuraavanlaiselta:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "npm run build && npx cap copy && firebase deploy",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },