Изградих това - какво сега? Как да разположим React App на DigitalOcean Droplet.

Повечето амбициозни разработчици са качвали статични HTML сайтове и преди. Процесът не е твърде плашещ, тъй като по същество просто премествате файлове от един компютър на друг и след това BAM! Уебсайт.

Но тези, които са се заели с ученето на React, често изливат стотици или дори хиляди часове, за да научат за компоненти, подпори и състояние, само за да остане с въпроса „Как да хоствам това?“ Не се страхувайте, колега разработчик. Внедряването на най-новия ви шедьовър е малко по-задълбочено, но не прекалено трудно. Ето как:

Подготовка за производство

Има няколко неща, които ще искате да направите, за да подготвите приложението си за внедряване.

Изключете обслужващите служители

Ако сте използвали нещо като create-response-app за стартиране на вашия проект, ще искате да изключите вградения сервизен работник, ако не сте го интегрирали специално, за да работи с вашето приложение. Въпреки че обикновено е безвреден, той може да причини някои проблеми, така че най-добре е просто да се отървете от него отпред. Намерете тези редове във вашия 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файл. Цялата конфигурация, която е различна между внедрена и локална, също трябва да влезе в този файл. Етикетите не могат да бъдат проксирани, така че трябва да кодираме в бекенд адреса, когато използваме 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 с вашия сървърен порт, за да сте сигурни, че всичко продължава да работи безпроблемно. Не забравяйте да стартирате локалния си сървър с node или nodemon, така че да работи и да работи, когато го проверявате. След като всичко изглежда добре, можем да го изпратим към Github (или Bit Bucket и т.н.).

ВАЖНО! Преди да направите това, проверете отново дали .gitignoreфайлът ви съдържа .envи /buildтака не публикувате чувствителна информация или ненужни файлове.

Настройка на DigitalOcean

DigitalOcean е водеща хостинг платформа и го прави сравнително лесно и рентабилно за разполагане на сайтове на React. Те използват Droplets, което е терминът, който те използват за своите сървъри. Преди да създадем нашата Капка, имаме още малко работа.

Създаване на SSH ключове

Сървърите са компютри, които имат публични IP адреси. Поради това се нуждаем от начин да кажем на сървъра кои сме, за да можем да правим неща, които не бихме искали никой друг да прави, като например да правим промени в нашите файлове. Ежедневната ви парола няма да бъде достатъчно сигурна и парола, достатъчно дълга и сложна, за да защити вашата капчица, би била почти невъзможна за запомняне. Вместо това ще използваме 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.pub, за да накарате терминала да го копира вместо вас.

Добавяне на вашия 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.

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.