Ezt építettem - most mi van? A React alkalmazás telepítése DigitalOcean cseppekre.

A legtöbb feltörekvő fejlesztő már korábban is feltöltött statikus HTML webhelyeket. A folyamat nem túl ijesztő, mivel lényegében csak fájlokat helyez át egyik számítógépről a másikra, majd a BAM-et! Weboldal.

De azok, akik a React tanulással foglalkoztak, gyakran több száz vagy akár több ezer órát töltenek az alkatrészek, kellékek és állapot megismerésében, és csak a „Hogyan fogadhatom ezt?” Kérdés marad. Ne félj, fejlesztőtársam. A legújabb remekműve egy kicsit elmélyültebb, de nem túl nehéz. Itt van, hogyan:

Felkészülés a gyártásra

Néhány dolgot meg kell tennie annak érdekében, hogy az alkalmazás készen álljon a telepítésre.

Kapcsolja ki a szerviz dolgozóit

Ha valami olyasmit használt, mint a create-react-app a projekt indításához, akkor kapcsolja ki a beépített szolgáltatót, ha nem külön integrálta az alkalmazással való együttműködésre. Bár általában ártalmatlan, okozhat bizonyos problémákat, ezért a legjobb, ha csak elölről szabadul meg. Keresse meg ezeket a sorokat a src/index.jsfájljában, és törölje őket:registerServiceWorker();import registerServiceWorker from ‘register-service-worker’

Készítse elő szerverét

Annak érdekében, hogy a lehető legnagyobb durranást érhesse el, a gyártási verzió minimalizálja a kódot, és eltávolítja az extra szóközt és a megjegyzéseket, hogy a lehető leggyorsabban letölthető legyen. Létrehoz egy új könyvtárat, amelynek neve:, /buildés meg kell győződnünk arról, hogy az Express-nek mondjuk-e, hogy használja. A kiszolgáló oldalán adja hozzá ezt a sort:app.use( express.static( `${__dirname}/../build` ) );

Ezután meg kell győződnie arról, hogy az útvonalak tudják-e, hogyan juthatnak el az index.html fájlhoz. Ehhez létre kell hoznunk egy végpontot, és az összes többi végpont alá kell helyeznünk a szerverfájlban. Így kell kinéznie:

const path = require('path')app.get('*', (req, res)=>{ res.sendFile(path.join(__dirname, '../build/index.html'));})

Hozza létre a gyártási összeállítást

Most, hogy az Express tudja használni a /buildkönyvtárat, itt az ideje annak létrehozására. Nyissa meg a terminált, ellenőrizze, hogy a projekt könyvtárában van-e, és használja a parancsotnpm run build

Tartsa biztonságban titkait

Ha API kulcsokat vagy adatbázis kapcsolati karakterláncot használ, remélhetőleg már elrejtette őket egy .envfájlban. A telepített és a lokális konfigurációnak is bele kell esnie ebbe a fájlba. A címkéket nem lehet proxyként használni, ezért a React dev szerver használatakor keményen be kell kódolnunk a háttérkép címét, de relatív elérési utakat szeretnénk használni a gyártásban. Az eredményül kapott .envfájl valami ilyennek tűnhet:

REACT_APP_LOGIN="//localhost:3030/api/auth/login"REACT_APP_LOGOUT="//localhost:3030/api/auth/logout"DOMAIN="user4234.auth0.com"ID="46NxlCzM0XDE7T2upOn2jlgvoS"SECRET="0xbTbFK2y3DIMp2TdOgK1MKQ2vH2WRg2rv6jVrMhSX0T39e5_Kd4lmsFz"SUCCESS_REDIRECT="//localhost:3030/"FAILURE_REDIRECT="//localhost:3030/api/auth/login"
AWS_ACCESS_KEY_ID=AKSFDI4KL343K55L3AWS_SECRET_ACCESS_KEY=EkjfDzVrG1cw6QFDK4kjKFUa2yEDmPOVzN553kAANcy
CONNECTION_STRING="postgres://vuigx:[email protected]:5432/vuigx"NODE_ENV=development

Nyomja meg a kódot

Tesztelje az alkalmazását helyileg úgy, hogy //localhost:3030a 3030-ra megy és kicseréli a szerver portjára, hogy megbizonyosodjon arról, hogy minden továbbra is zökkenőmentesen működik. Ne felejtse el a helyi kiszolgálót csomópont vagy csomópont használatával indítani, hogy az ellenőrizésekor működjön. Miután minden jól néz ki, kitolhatjuk a Github-ra (vagy Bit Bucket stb.).

FONTOS! Mielőtt ezt megtenné, ellenőrizze még egyszer, hogy a .gitignorefájlja tartalmaz-e .env, /buildígy nem tesz közzé bizalmas információkat vagy felesleges fájlokat.

A DigitalOcean beállítása

A DigitalOcean egy vezető hosting platform, amely viszonylag egyszerűvé és költséghatékonnyá teszi a React webhelyek telepítését. Cseppeket használnak, ezt a kifejezést használják a szervereiken. Mielőtt elkészítenénk a Cseppünket, még mindig van egy kis munkánk.

SSH-kulcsok létrehozása

A kiszolgálók nyilvános IP-címmel rendelkező számítógépek. Emiatt szükségünk van egy módra arra, hogy megmondjuk a szervernek, hogy kik vagyunk, hogy olyan dolgokat is megtehessünk, amiket másnak nem szeretnénk, például a fájljaink módosítását. A mindennapi jelszó nem lesz elég biztonságos, és a cseppje védelméhez elég hosszú és összetett jelszót szinte lehetetlen megjegyezni. Ehelyett SSH kulcsot fogunk használni.

Az SSH kulcs létrehozásához írja be ezt a parancsot a terminálba: ssh-keygen -t rsa

Ez elindítja az SSH-kulcsok létrehozásának folyamatát. Először meg kell adnia, hol adja meg az új kulcsot. Kivéve, ha még rendelkezik egy kulccsal, amelyet meg kell tartania, megtarthatja az alapértelmezett helyet, és a folytatáshoz egyszerűen nyomja meg az Enter billentyűt.

További biztonsági szintként arra az esetre, ha valaki elkapja a számítógépét, meg kell adnia egy jelszót a kulcs biztosításához. A terminál nem jeleníti meg a billentyűleütéseket, amikor beírja ezt a jelszót, de nyomon követi azt. Miután megnyomta az Enter billentyűt, a megerősítéshez még egyszer be kell írnia. Ha sikerül, most valami ilyesmit kell látnia:

Generating public/private rsa key pair.Enter file in which to save the key (/Users/username/.ssh/id_rsa):Enter passphrase (empty for no passphrase):Enter same passphrase again:Your identification has been saved in demo_rsa.Your public key has been saved in demo_rsa.pub.The key fingerprint is:cc:28:30:44:01:41:98:cf:ae:b6:65:2a:f2:32:57:b5 [email protected] key's randomart image is:+--[ RSA 2048]----+|=*+. ||o. || oo || oo .+ || . ....S || . ..E || . + ||*.= ||+Bo |+-----------------+

Mi történt?

Két fájl készült a számítógépén - id_rsaés id_rsa.pub. A id_rsafájl az ön titkos kulcsa, és az aláírás ellenőrzésére szolgál, amikor a id_rsa.pubfájlt vagy a nyilvános kulcsot használja. Meg kell adnunk a nyilvános kulcsunkat a DigitalOcean számára. Ahhoz, hogy megkapja, írja be cat ~/.ssh/id_rsa.pub. Most egy hosszú karakterláncot kell néznie, amely a id_rsa.pubfájl tartalma. Valahogy így néz ki:

ssh-rsaAABC3NzaC1yc2EAAAADAQABAAABAQDR5ehyadT9unUcxftJOitl5yOXgSi2Wj/s6ZBudUS5Cex56LrndfP5Uxb8+Qpx1D7gYNFacTIcrNDFjdmsjdDEIcz0WTV+mvMRU1G9kKQC01YeMDlwYCopuENaas5+cZ7DP/qiqqTt5QDuxFgJRTNEDGEebjyr9wYk+mveV/acBjgaUCI4sahij98BAGQPvNS1xvZcLlhYssJSZrSoRyWOHZ/hXkLtq9CvTaqkpaIeqvvmNxQNtzKu7ZwaYWLydEKCKTAe4ndObEfXexQHOOKwwDSyesjaNc6modkZZC+anGLlfwml4IUwGv10nogVg9DTNQQLSPVmnEN3Z [email protected]

Most ez egy jelszó! Másolja át kézzel a karakterláncot, vagy használja a pbcopy < ~/.ssh/id_rsa.pub parancsot , hogy a terminál másolja az Ön számára.

SSH-kulcs hozzáadása a DigitalOcean programhoz

Jelentkezzen be DigitalOcean fiókjába, vagy regisztráljon, ha még nem tette meg. Lépjen a Biztonsági beállítások elemre, és kattintson az SSH hozzáadása elemre. Illessze be a másolt kulcsot, és adjon nevet. Bármelyik nevet megadhatja, de célszerű hivatkozni arra a számítógépre, amelyen a kulcs mentve van, különösen, ha több számítógépet használ rendszeresen.

Csepp létrehozása

A kulccsal a helyén végre elkészíthetjük a Cseppünket. A kezdéshez kattintson a Csepp létrehozása elemre. Megkérik, hogy válasszon operációs rendszert, de céljaink érdekében az alapértelmezett Ubuntu rendben fog működni.

Ki kell választania, hogy milyen méretű cseppet szeretne használni. Sok esetben a legkisebb csepp is megteszi. Ellenőrizze azonban az elérhető lehetőségeket, és válassza ki azt, amelyik a legjobban megfelel a projektjének.

Ezután válasszon ki egy adatközpontot a cseppjének. Válasszon egy helyet a várható látogatói körzet központi részén. Az új szolgáltatásokat a DigitalOcean különböző időpontokban alkalmazza különböző adatközpontokban, de ha nem tudja, hogy olyan speciális funkciót szeretne használni, amely csak meghatározott helyeken érhető el, ez nem számít.

Ha további szolgáltatásokat szeretne hozzáadni a cseppecskéhez, például biztonsági másolatokat vagy privát hálózatot, itt megadhatja ezt a lehetőséget. Ne feledje, hogy ezek a szolgáltatások kapcsolódó költségekkel járnak.

Végül ellenőrizze, hogy az SSH kulcs ki van-e jelölve, és adjon nevet a cseppjének. Lehetséges több projekt is egy cseppen elhelyezni, ezért nem érdemes projekt-specifikus nevet adni neki. Küldje el a beállításokat az oldal alján található Létrehozás gombra kattintva.

Csatlakozás a csepphez

A létrehozott cseppünkkel mostantól SSH-n keresztül csatlakozhatunk hozzá. Másolja a csepp IP-címét, és menjen vissza a termináljához. Írja be az ssh parancsot, amelyet a root @ youripaddress követ, ahol a youripaddress a csepp IP-címe. Meg kell kinéznie: ssh [email protected]. Ez azt mondja a számítógépének, hogy root felhasználóként szeretne csatlakozni az IP-címéhez. Alternatív megoldásként beállíthat felhasználói fiókokat, ha nem akar rootként bejelentkezni, de ez nem szükséges.

A Node telepítése

To run React, we’ll need an updated version of Node. First we want to run apt-get update && apt-get dist-upgrade to update the Linux software list. Next, enter apt-get install nodejs -y, apt-get install npm -y, and npm i -g n to install Nodejs and npm.

Your React app dependencies might require a specific version of Node, so check the version that your project is using by running node -v in your projects directory. You’ll probably want to do this in a different terminal tab so you don’t have to log in through SSH again.

Once you know what version you need, go back to your SSH connection and run n 6.11.2, replacing 6.11.2 with your specific version number. This ensures your Droplet’s version of Node matches your project and minimizes potential issues.

Install your app to the Droplet

All the groundwork has been laid, and it’s finally time to install our React app! While still connected through SSH, make sure you’re in your home directory. You can enter cd ~ to take you there if you’re not sure.

To get the files to your Droplet, you’re going to clone them from your Github repo. Grab the HTTP clone link from Github and in your terminal enter git clone //github.com/username/my-react-project.git. Just like with your local project, cd into your project folder using cd my-react-project and then run npm install.

Don’t ignore your ignored files

Remember that we told Git to ignore the .env file, so it won’t be included in the code we just pulled down. We need to add it manually now. touch .env will create an empty .env file that we can then open in the nano editor using nano .env. Copy the contents of your local .env file and paste them into the nano editor.

We also told Git to ignore the build directory. That’s because we were just testing the production build, but now we’re going to build it again on our Droplet. Use npm run build to run this process again. If you get an error, check to make sure you have all of your dependencies listed in your package.json file. If there are any missing, npm install those packages.

Start it up!

Run your server with node server/index.js (or whatever your server file is named) to make sure everything is working. If it throws an error, check again for any missing dependencies that might not have been caught in the build process. If everything starts up, you should now be able to go to ipaddress:serverport to see your site: 123.45.67.8:3232. If your server is running on port 80, this is a default port and you can just use the IP address without specifying a port number: 123.45.67.8

You now have a space on the internet to call your own! If you have purchased a domain name you’d like to use in place of the IP address, you can follow DigitalOcean’s instructions on how to set this up.

Keep it running

Your site is live, but once you close the terminal, your server will stop. This is a problem, so we’ll want to install some more software that will tell the server not to stop once the connection is terminated. There are some options for this, but let’s use Program Manager 2 for the sake of this article.

Kill your server if you haven’t already and run npm install -g pm2. Once installed, we can tell it to run our server using pm2 start server/index.js

Updating your code

At some point, you’ll probably want to update your project, but luckily uploading changes is quick and easy. Once you push your code to Github, ssh into your Droplet and cd into your project directory. Because we cloned from Github initially, we don’t need to provide any links this time. You can pull down the new code simply by running git pull.

To incorporate frontend changes, you will need to run the build process again with npm run build. If you’ve made changes to the server file, restart PM2 by running pm2 restart all. That’s it! Your updates should be live now.