لقد بنيت هذا - ماذا الآن؟ كيفية نشر تطبيق React على DigitalOcean Droplet.

قام معظم المطورين الطموحين بتحميل مواقع HTML ثابتة من قبل. هذه العملية ليست شاقة للغاية ، لأنك في الأساس تقوم فقط بنقل الملفات من كمبيوتر إلى آخر ، ثم BAM! موقع الكتروني.

لكن أولئك الذين تعاملوا مع تعلُّم React غالبًا ما يسكبون مئات أو حتى آلاف الساعات في التعرف على المكونات والدعائم والحالة ، فقط ليُتركوا مع السؤال "كيف يمكنني استضافة هذا؟" لا تخف ، زميل مطور. يعد نشر أحدث تحفة فنية أكثر تعمقًا ، ولكنه ليس صعبًا للغاية. إليك الطريقة:

التحضير للإنتاج

هناك بعض الأشياء التي تريد القيام بها لتجهيز تطبيقك للنشر.

قم بإيقاف تشغيل عمال الخدمة

إذا كنت قد استخدمت شيئًا مثل create-reaction-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

حافظ على أسرارك آمنة

إذا كنت تستخدم مفاتيح واجهة برمجة التطبيقات أو سلسلة اتصال قاعدة البيانات ، فنأمل أن تكون قد أخفيتها بالفعل في .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:30303030 واستبداله بمنفذ الخادم الخاص بك للتأكد من أن كل شيء لا يزال يعمل بسلاسة. تذكر أن تبدأ خادمك المحلي بالعقدة أو العقدة حتى يتم تشغيلها عند التحقق منها. بمجرد أن يبدو كل شيء جيدًا ، يمكننا دفعه إلى Github (أو Bit Bucket ، إلخ).

مهم! قبل القيام بذلك ، تحقق مرة أخرى من احتواء .gitignoreالملف الخاص بك .envومن /buildثم لا تنشر معلومات حساسة أو ملفات غير ضرورية.

إعداد DigitalOcean

DigitalOcean هي منصة استضافة رائدة ، وتجعل نشر مواقع React أمرًا سهلاً وفعالًا نسبيًا. يستخدمون Droplets ، وهو المصطلح الذي يستخدمونه لخوادمهم. قبل إنشاء Droplet الخاص بنا ، لا يزال أمامنا القليل من العمل للقيام به.

إنشاء مفاتيح SSH

الخوادم هي أجهزة كمبيوتر لها عناوين IP عامة. لهذا السبب ، نحتاج إلى طريقة لإخبار الخادم من نحن ، حتى نتمكن من القيام بأشياء لا نريد أن يقوم بها أي شخص آخر ، مثل إجراء تغييرات على ملفاتنا. لن تكون كلمة مرورك اليومية آمنة بدرجة كافية ، وسيكون من المستحيل تذكر كلمة مرور طويلة ومعقدة بدرجة كافية لحماية Droplet الخاص بك. بدلاً من ذلك ، سنستخدم مفتاح SSH.

لإنشاء مفتاح SSH ، أدخل هذا الأمر في جهازك الطرفي: ssh-keygen -t rsa

هذا يبدأ عملية توليد مفتاح SSH. أولاً ، سيُطلب منك تحديد مكان حفظ المفتاح الجديد. ما لم يكن لديك بالفعل مفتاح تحتاج إلى الاحتفاظ به ، يمكنك الاحتفاظ بالموقع الافتراضي والضغط ببساطة على إدخال للمتابعة.

كطبقة أمان إضافية في حالة حصول شخص ما على جهاز الكمبيوتر الخاص بك ، سيتعين عليك إدخال كلمة مرور لتأمين مفتاحك. لن تعرض المحطة الطرفية ضغطات المفاتيح أثناء كتابة كلمة المرور هذه ، ولكنها تتعقبها. بمجرد الضغط على مفتاح الإدخال ، يجب عليك كتابته مرة أخرى للتأكيد. إذا نجحت ، يجب أن ترى الآن شيئًا كهذا:

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]

Now that’s a password! Copy the string manually, or use the command pbcopy < ~/.ssh/id_rsa.pub to have the terminal copy it for you.

Adding your SSH Key to DigitalOcean

Login to your DigitalOcean account or sign up if you haven’t already. Go to your Security Settings and click on Add SSH. Paste in the key you copied and give it a name. You can name it whatever you like, but it’s good idea to reference the computer the key is saved on, especially if you use multiple computers regularly.

Creating a Droplet

With the key in place, we can finally create our Droplet. To get started, click Create Droplet. You’ll be asked to choose an OS, but for our purposes, the default Ubuntu will work just fine.

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. إذا قمت بإجراء تغييرات على ملف الخادم ، فأعد تشغيل PM2 عن طريق التشغيل pm2 restart all. هذا هو! يجب أن تكون تحديثاتك مباشرة الآن.