Το έχτισα - Τώρα τι; Πώς να αναπτύξετε μια εφαρμογή React σε ένα DigitalOcean Droplet.

Οι περισσότεροι επίδοξοι προγραμματιστές έχουν ανεβάσει στατικούς ιστότοπους HTML στο παρελθόν. Η διαδικασία δεν είναι πολύ τρομακτική, καθώς ουσιαστικά μετακινείτε αρχεία από έναν υπολογιστή σε άλλο, και μετά BAM! Δικτυακός τόπος.

Αλλά εκείνοι που έχουν αντιμετωπίσει την εκμάθηση React συχνά χύνουν εκατοντάδες ή και χιλιάδες ώρες στην εκμάθηση σχετικά με τα στοιχεία, τα στηρίγματα και την κατάσταση, για να μείνουν μόνο με την ερώτηση "Πώς μπορώ να το φιλοξενήσω;" Μη φοβάστε, συνεργάτη προγραμματιστή. Η ανάπτυξη του πιο πρόσφατου αριστουργήματός σας είναι λίγο πιο σε βάθος, αλλά δεν είναι υπερβολικά δύσκολη. Δείτε πώς:

Προετοιμασία για παραγωγή

Υπάρχουν μερικά πράγματα που θα θέλατε να κάνετε για να προετοιμάσετε την εφαρμογή σας για ανάπτυξη.

Απενεργοποίηση εργαζομένων σέρβις

Εάν έχετε χρησιμοποιήσει κάτι όπως το create-react-app για να κάνετε bootstrap το έργο σας, θα θελήσετε να απενεργοποιήσετε το ενσωματωμένο service service εάν δεν το έχετε ενσωματώσει ειδικά για να λειτουργεί με την εφαρμογή σας. Αν και συνήθως αβλαβές, μπορεί να προκαλέσει κάποια προβλήματα, οπότε είναι καλύτερο να το ξεφορτωθείτε μπροστά. Βρείτε αυτές τις γραμμές στο src/index.jsαρχείο σας και διαγράψτε τις:registerServiceWorker();import registerServiceWorker from ‘register-service-worker’

Ετοιμάστε τον διακομιστή σας

Για να κερδίσετε τα περισσότερα χρήματα, μια παραγωγή θα ελαχιστοποιήσει τον κώδικα και θα αφαιρέσει επιπλέον κενό χώρο και σχόλια, ώστε να είναι όσο το δυνατόν πιο γρήγορη η λήψη. Δημιουργεί έναν νέο κατάλογο που ονομάζεται /buildκαι πρέπει να βεβαιωθούμε ότι λέμε στο Express να το χρησιμοποιήσει. Στη σελίδα του διακομιστή σας, προσθέστε αυτήν τη γραμμή:app.use( express.static( `${__dirname}/../build` ) );

Στη συνέχεια, θα πρέπει να βεβαιωθείτε ότι οι διαδρομές σας γνωρίζουν πώς να φτάσετε στο αρχείο index.html. Για να γίνει αυτό, πρέπει να δημιουργήσουμε ένα τελικό σημείο και να το τοποθετήσουμε κάτω από όλα τα άλλα τελικά σημεία στο αρχείο του διακομιστή σας. Θα πρέπει να μοιάζει με αυτό:

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

Δημιουργήστε την κατασκευή παραγωγής

Τώρα που το Express γνωρίζει να χρησιμοποιεί τον /buildκατάλογο, ήρθε η ώρα να τον δημιουργήσετε. Ανοίξτε το τερματικό σας, βεβαιωθείτε ότι βρίσκεστε στον κατάλογο του έργου σας και χρησιμοποιήστε την εντολήnpm run build

Κρατήστε τα μυστικά σας ασφαλή

Εάν χρησιμοποιείτε κλειδιά API ή συμβολοσειρά σύνδεσης βάσης δεδομένων, ελπίζουμε ότι τα έχετε ήδη κρύψει σε ένα .envαρχείο. Όλη η διαμόρφωση που είναι διαφορετική μεταξύ του αναπτυσσόμενου και του τοπικού πρέπει επίσης να μεταβεί σε αυτό το αρχείο. Δεν είναι δυνατή η μεσολάβηση των ετικετών, επομένως πρέπει να κάνουμε σκληρό κώδικα στη διεύθυνση backend κατά τη χρήση του διακομιστή React dev, αλλά θέλουμε να χρησιμοποιήσουμε σχετικές διαδρομές στην παραγωγή. Το .envαρχείο που προκύπτει μπορεί να μοιάζει με αυτό:

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

Σπρώξτε τον κωδικό σας

Δοκιμάστε την εφαρμογή σας τοπικά μεταβαίνοντας //localhost:3030και αντικαθιστώντας το 3030 με τη θύρα διακομιστή σας, για να βεβαιωθείτε ότι όλα λειτουργούν ομαλά. Θυμηθείτε να ξεκινήσετε τον τοπικό σας διακομιστή με κόμβο ή κομβίο, ώστε να λειτουργεί και όταν το ελέγχετε. Μόλις όλα φαίνονται καλά, μπορούμε να τα προωθήσουμε στο Github (ή το Bit Bucket, κ.λπ.).

ΣΠΟΥΔΑΙΟΣ! Προτού το κάνετε αυτό, ελέγξτε ξανά ότι το .gitignoreαρχείο σας περιέχει .envκαι /buildέτσι δεν δημοσιεύετε ευαίσθητες πληροφορίες ή περιττά αρχεία.

Ρύθμιση DigitalOcean

Το DigitalOcean είναι μια κορυφαία πλατφόρμα φιλοξενίας και καθιστά σχετικά εύκολη και οικονομικά αποδοτική την ανάπτυξη ιστότοπων React. Χρησιμοποιούν σταγονίδια, που είναι ο όρος που χρησιμοποιούν για τους διακομιστές τους. Πριν δημιουργήσουμε το σταγονίδιο μας, έχουμε ακόμη λίγη δουλειά να κάνουμε.

Δημιουργία κλειδιών SSH

Οι διακομιστές είναι υπολογιστές με δημόσιες διευθύνσεις IP. Εξαιτίας αυτού, χρειαζόμαστε έναν τρόπο να πούμε στον διακομιστή ποιοι είμαστε, έτσι ώστε να μπορούμε να κάνουμε πράγματα που δεν θα θέλαμε να κάνει κανένας άλλος, όπως να κάνουμε αλλαγές στα αρχεία μας. Ο καθημερινός κωδικός πρόσβασής σας δεν θα είναι αρκετά ασφαλής και ένας κωδικός πρόσβασης αρκετά μεγάλος και αρκετά περίπλοκος για την προστασία του Droplet σας θα ήταν σχεδόν αδύνατο να θυμηθείτε. Αντ 'αυτού, θα χρησιμοποιήσουμε ένα κλειδί SSH.

Για να δημιουργήσετε το κλειδί SSH, εισαγάγετε αυτήν την εντολή στο τερματικό σας: ssh-keygen -t rsa

Αυτό ξεκινά τη διαδικασία δημιουργίας κλειδιών SSH. Αρχικά, θα σας ζητηθεί να καθορίσετε πού να αποθηκεύσετε το νέο κλειδί. Εάν δεν έχετε ήδη ένα κλειδί που πρέπει να κρατήσετε, μπορείτε να διατηρήσετε την προεπιλεγμένη θέση και απλώς πατήστε το πλήκτρο enter για να συνεχίσετε.

Ως πρόσθετο επίπεδο ασφάλειας σε περίπτωση που κάποιος πλησιάσει τον υπολογιστή σας, θα πρέπει να εισαγάγετε έναν κωδικό πρόσβασης για να ασφαλίσετε το κλειδί σας. Το τερματικό σας δεν θα εμφανίζει τις πληκτρολογήσεις σας καθώς πληκτρολογείτε αυτόν τον κωδικό πρόσβασης, αλλά το παρακολουθεί. Μόλις πατήσετε το enter, θα πρέπει να το πληκτρολογήσετε ξανά για επιβεβαίωση. Εάν είναι επιτυχής, θα πρέπει τώρα να δείτε κάτι τέτοιο:

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 |+-----------------+

Τι συνέβη?

Δύο αρχεία έχουν δημιουργηθεί στον υπολογιστή σας - id_rsaκαι id_rsa.pub. Το id_rsaαρχείο είναι το ιδιωτικό σας κλειδί και χρησιμοποιείται για την επαλήθευση της υπογραφής σας όταν χρησιμοποιείτε το id_rsa.pubαρχείο ή το δημόσιο κλειδί. Πρέπει να δώσουμε το δημόσιο κλειδί μας στο DigitalOcean. Για να το πάρετε, εισαγάγετε cat ~/.ssh/id_rsa.pub. Θα πρέπει τώρα να εξετάζετε μια μεγάλη σειρά χαρακτήρων, που είναι το περιεχόμενο του id_rsa.pubαρχείου σας . Μοιάζει με αυτό:

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

Τώρα αυτός είναι ένας κωδικός πρόσβασης! Αντιγράψτε τη συμβολοσειρά με μη αυτόματο τρόπο ή χρησιμοποιήστε τη γραμμή εντολών pbcopy < ~/.ssh/id_rsa.για να το αντιγράψει το τερματικό για εσάς.

Προσθήκη του κλειδιού SSH στο DigitalOcean

Συνδεθείτε στον λογαριασμό σας στο DigitalOcean ή εγγραφείτε εάν δεν το έχετε κάνει ήδη. Μεταβείτε στις Ρυθμίσεις ασφαλείας και κάντε κλικ στο Προσθήκη SSH. Επικολλήστε το κλειδί που αντιγράψατε και δώστε του ένα όνομα. Μπορείτε να το ονομάσετε ό, τι θέλετε, αλλά είναι καλή ιδέα να αναφέρετε τον υπολογιστή στο οποίο έχει αποθηκευτεί το κλειδί, ειδικά εάν χρησιμοποιείτε τακτικά πολλούς υπολογιστές.

Δημιουργία σταγονιδίου

Με το κλειδί στη θέση του, μπορούμε τελικά να δημιουργήσουμε το σταγονίδιο μας. Για να ξεκινήσετε, κάντε κλικ στην επιλογή Δημιουργία σταγονιδίου. Θα σας ζητηθεί να επιλέξετε ένα λειτουργικό σύστημα, αλλά για τους σκοπούς μας, το προεπιλεγμένο Ubuntu θα λειτουργήσει μια χαρά.

You’ll need to select which size Droplet you want to use. In many cases, the smallest Droplet will do. However, review the available options and choose the one that will work best for your project.

Next, select a data center for your Droplet. Choose a location central to your expected visitor base. New features are rolled out by DigitalOcean in different data centers at different times, but unless you know you want to use a special feature that’s only available in specific locations, this won’t matter.

If you want to add additional services to your Droplet such as backups or private networking, you have that option here. Be aware, there is an associated cost for these services.

Finally, make sure your SSH key is selected and give your Droplet a name. It is possible to host multiple projects on a single Droplet, so you may not want to give it a project-specific name. Submit your settings by clicking the Create button at the bottom of the page.

Connecting to your Droplet

With our Droplet created, we can now connect to it via SSH. Copy the IP address for your Droplet and go back to your terminal. Enter ssh followed by [email protected], where youripaddress is the IP address for your Droplet. It should look something like this: ssh [email protected]. This tells your computer that you want to connect to your IP address as the root user. Alternatively, you can set up user accounts if you don’t want to login as root, but it’s not necessary.

Installing Node

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.

Για να ενσωματώσετε αλλαγές στο frontend, θα χρειαστεί να εκτελέσετε ξανά τη διαδικασία κατασκευής npm run build. Εάν έχετε πραγματοποιήσει αλλαγές στο αρχείο διακομιστή, κάντε επανεκκίνηση του PM2 εκτελώντας pm2 restart all. Αυτό είναι! Οι ενημερώσεις σας θα πρέπει να είναι ζωντανές τώρα.