Я побудував це - що тепер? Як розгорнути додаток React на Droplet DigitalOcean.

Більшість початківців розробників раніше завантажували статичні 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, але ми хочемо використовувати відносні шляхи у виробництві. Отриманий .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. Вставте скопійований ключ і дайте йому ім'я. Ви можете назвати його як завгодно, але корисно посилатися на комп’ютер, на якому збережено ключ, особливо якщо ви регулярно використовуєте кілька комп’ютерів.

Створення краплі

Маючи ключ на місці, ми нарешті можемо створити наш Droplet. Для початку натисніть Створити краплю. Вам буде запропоновано вибрати ОС, але для наших цілей 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.