Изградио сам ово - шта сад? Како распоредити Реацт апликацију на ДигиталОцеан Дроплет.

Већина надобудних програмера је већ отпремила статичне ХТМЛ странице. Процес није превише застрашујући, јер у суштини само премештате датотеке са једног рачунара на други, а затим БАМ! Веб сајт.

Али они који су се позабавили учењем Реацт-а често уложе стотине или чак хиљаде сати у учење о компонентама, реквизитима и стању, да би остало само питање „Како да ово угостим?“ Не бој се, колега програмеру. Примена вашег најновијег ремек-дела је мало дубља, али не превише тешка. Ево како:

Припрема за производњу

Неколико ствари ћете желети да припремите апликацију за примену.

Искључите услужне раднике

Ако сте за покретање пројекта користили нешто попут цреате-респонсе-апп, желећете да искључите уграђеног услужног радника ако га нисте посебно интегрисали за рад са апликацијом. Иако је обично безопасан, може изазвати неке проблеме, па је најбоље да га се само решите унапред. Пронађите ове редове у src/index.jsдатотеци и избришите их:registerServiceWorker();import registerServiceWorker from ‘register-service-worker’

Припремите сервер

Да бисте максимално искористили свој новац, производна верзија ће умањити код и уклонити сувишно празно место и коментаре како би се што пре преузело. Ствара нови директоријум који се зове /buildи морамо бити сигурни да кажемо Екпресс-у да га користи. На страницу сервера додајте овај ред:app.use( express.static( `${__dirname}/../build` ) );

Даље, мораћете да се уверите да ваше руте знају како да дођу до ваше датотеке индек.хтмл. Да бисмо то урадили, треба да креирамо крајњу тачку и поставимо је испод свих осталих крајњих тачака у датотеци вашег сервера. То би требало изгледати овако:

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

Направите производну зграду

Сад кад Екпресс зна да користи /buildдиректоријум, време је да га креирамо. Отворите терминал, уверите се да сте у директоријуму свог пројекта и користите наредбуnpm run build

Чувајте своје тајне

Ако користите АПИ кључеве или низ везе базе података, надамо се да сте их већ сакрили у .envдатотеку. Сва конфигурација која се разликује између постављене и локалне такође треба да уђе у ову датотеку. Ознаке се не могу проксирати, па морамо да кодирамо на позадинску адресу када користимо Реацт дев сервер, али желимо да користимо релативне путање у производњи. Добијена .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 својим портом сервера како бисте били сигурни да све и даље ради без проблема. Не заборавите да покренете локални сервер са ноде или нодемон, тако да је активан и покренут када га проверите. Једном када све изгледа добро, можемо га гурнути у Гитхуб (или Бит Буцкет, итд.).

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

Постављање ДигиталОцеан-а

ДигиталОцеан је водећа платформа за хостинг и омогућава релативно лако и исплативо постављање Реацт локација. Користе капљице, што је термин који користе за своје сервере. Пре него што креирамо нашу Капљицу, имамо још мало посла.

Креирање ССХ кључева

Сервери су рачунари који имају јавне ИП адресе. Због овога нам је потребан начин да серверу кажемо ко смо, како бисмо могли да радимо ствари за које не бисмо желели да их ради неко други, попут уношења промена у наше датотеке. Ваша свакодневна лозинка неће бити довољно сигурна, а лозинку дугачку и сложену да заштити вашу капљицу било би готово немогуће запамтити. Уместо тога, користићемо ССХ кључ.

Да бисте креирали свој ССХ кључ, унесите ову наредбу у свој терминал: ssh-keygen -t rsa

Ово започиње процес генерисања ССХ кључа. Прво ће се од вас тражити да наведете где ћете сачувати нови кључ. Ако већ немате кључ који треба да задржите, можете задржати подразумевану локацију и једноставно притисните ентер да бисте наставили.

Као додатни ниво заштите у случају да неко дође до вашег рачунара, мораћете да унесете лозинку да бисте осигурали свој кључ. Ваш терминал неће приказивати притиске тастера док уносите ову лозинку, али је прати. Једном када притиснете ентер, мораћете још једном да га откуцате да бисте потврдили. Ако успете, сада бисте требали видети нешто попут овог:

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датотеку, или јавни кључ. Наш јавни кључ морамо дати ДигиталОцеан-у. Да бисте је добили, унесите 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.пуб да би га терминал копирао за вас.

Додавање ССХ кључа у ДигиталОцеан

Пријавите се на свој рачун ДигиталОцеан или се региструјте ако то већ нисте урадили. Идите на своја Безбедносна подешавања и кликните на Додај ССХ. Налепите кључ који сте копирали и дајте му име. Можете му дати име како год желите, али добро је упутити рачунар на коме је кључ сачуван, посебно ако редовно користите више рачунара.

Стварање капљице

Са постављеним кључем, коначно можемо створити нашу Капљицу. Да бисте започели, кликните Цреате Дроплет. Од вас ће се тражити да изаберете ОС, али за наше сврхе подразумевани Убунту ће радити сасвим у реду.

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.

Да бисте укључили промене фронтенда, мораћете поново да покренете процес изградње са npm run build. Ако сте унели промене у датотеку сервера, поново покрените ПМ2 покретањем pm2 restart all. То је то! Ваша ажурирања би требала бити објављена већ сада.