Πώς να αναπτύξετε μια εφαρμογή React σε ένα cPanel σε έναν υποκατάλογο

Η ανάπτυξη οποιασδήποτε εφαρμογής σε α cPanel είναι εύκολο. Ωστόσο, ποικίλλει ανάλογα με τον τύπο του περιβάλλοντος εφαρμογής και τις εξαρτήσεις. Η πιο κουραστική δουλειά είναι η διαμόρφωση μέσα σε οποιονδήποτε διακομιστή με βάση τις εξαρτήσεις, είτε είναι Κοινόχρηστη φιλοξενία, VPSή AWS. Μπορούμε φιλοξενεί την εφαρμογή React σε οποιονδήποτε διακομιστή. Όπως γνωρίζουμε για την εκτέλεση εφαρμογών React, χρειαζόμαστε Κόμβος JS και NPM για τη διαχείριση των εξαρτήσεων της εφαρμογής. Όταν δημιουργούμε μια κατασκευή, δημιουργεί τα σενάρια που θα εξαντληθούν στον διακομιστή. Γενικά, μετά τη δημιουργία μιας κατασκευής, παίρνει τη διαδρομή του ριζικού φακέλου του καταλόγου του έργου. Όταν το αναπτύσσουμε στον διακομιστή, προσπαθεί να βρει αυτή τη διαδρομή. Έτσι, ως επί το πλείστον, εάν έχουμε κάποιον κύριο τομέα στον οποίο θέλουμε αναπτύξτε την εφαρμογή React τότε θα αναπτυχθεί εύκολα. Αλλά, σε περίπτωση που θέλετε να αναπτύξετε μια εφαρμογή React μέσα σε έναν υποκατάλογο του τομέα, τότε δεν είναι εύκολη δουλειά. Σήμερα, σε αυτήν την ανάρτηση, θα καταλάβετε πώς να το κάνετε αναπτύξτε την εφαρμογή React σε έναν υποκατάλογο στο cPanel.

Προαπαιτούμενα

Αυτή η ανάρτηση είναι για το πώς να αναπτύξτε την εφαρμογή React σε έναν υποκατάλογο στο cPanel. Επομένως, για αυτό, χρειάζεστε μια εγκατάσταση React Application και ένα cPanel έτοιμο για ανάπτυξη. Μπορείτε να φιλοξενήσετε την εφαρμογή React στο Firebase ή οποιαδήποτε δωρεάν φιλοξενία επίσης. Αυτό, θα το καλύψω σε άλλη ανάρτηση.

Μόλις είστε έτοιμοι, ας ξεκινήσουμε τα βήματα ανάπτυξης.

Αναπτύξτε την εφαρμογή React σε έναν υποκατάλογο στον τομέα ρίζας cPanel

Στο πρώτο βήμα, θα δημιουργήσουμε έναν υποκατάλογο στον κατάλογο ριζικού τομέα. Έτσι, από προεπιλογή, έχουμε το public_html κατάλογο για έναν τομέα που αντιστοιχίζεται μέσα στο cPanel. Τώρα, υποθέτοντας ότι έχετε ένα domain με όνομα example.com έχοντας ένα public_html ριζικός κατάλογος. Όμως, θέλουμε να φιλοξενήσουμε την εφαρμογή React σε έναν υποκατάλογο με το όνομα εφαρμογή μεσα στην public_html.

Ως εκ τούτου, θα δημιουργήσουμε έναν υποκατάλογο με το όνομα εφαρμογή μεσα στην public_html (Κατάλογος ριζικού τομέα). Έτσι, η διεύθυνση URL θα γίνει example.com/app για την εφαρμογή React.

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

Διαμορφώστε την εφαρμογή React για να φιλοξενήσει σε έναν υποκατάλογο cPanel

Σε επίπεδο εφαρμογής, θα χρειαστεί να διαμορφώσουμε τον υποκατάλογο μας που έχουμε δημιουργήσει στο cPanel.

Στο αρχικό βήμα, ανοίξτε το έργο σε οποιοδήποτε πρόγραμμα επεξεργασίας (συνιστάται ο κωδικός VS) που χρειάζεστε για να πλοηγηθείτε στο πακέτο.json διαθέσιμο αρχείο στον ριζικό κατάλογο του έργου.

Στη συνέχεια, προσθέστε ένα χαρακτηριστικό με όνομα αρχική σελίδα όπως φαίνεται παρακάτω.

"homepage: "/sub-directory"

Έτσι, στην περίπτωσή μας, αφού προσθέσουμε το όνομα του καταλόγου (εφαρμογή), θα γίνει έτσι.

{
  "name": "react-blog-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/app",
  "dependencies": {
    ....
    ....
    ....
  },

Έχουμε καθορίσει το όνομα του φακέλου ως χαρακτηριστικό με όνομα αρχική σελίδα με το όνομα του καταλόγου στο πακέτο.json αντικείμενο.

Ενημερώστε το React Router DOM For Basename Router

Στο επόμενο βήμα, θα χρειαστεί να ενημερώσουμε BrowserRouter. Καθώς θα έχουμε ήδη το React Router DOM για διαχείριση δρομολόγησης για την εφαρμογή React.

Τώρα, θα προσθέσουμε το χαρακτηριστικό basename <Δρομολογητής> συστατικό. Στο χαρακτηριστικό basename, θα μεταβιβάσουμε το όνομα του υποκαταλόγου (εφαρμογή) όπως φαίνεται παρακάτω.

import React from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { AppRouter } from './components/AppRouter';
import './App.scss';

export const App = () => {
  return (
    <Router basename={"/app"}>
      <AppRouter />
    </Router>
  );
};

Τα στηρίγματα ονόματος βάσης θα βοηθήσουν το αίτημα να κοιτάξει στον καθορισμένο κατάλογο καθώς προσθέσαμε την εφαρμογή.

Δημιουργήστε την εφαρμογή React για ανάπτυξη στην παραγωγή

Στο επόμενο βήμα, πρέπει να φτιάξουμε μια κατασκευή της εφαρμογής ώστε να μπορέσουμε να την αναπτύξουμε στην παραγωγή. Για να δημιουργήσετε μια κατασκευή, πατήστε την παρακάτω εντολή στο τερματικό.

npm run build

Δημιουργία αρχείου .htaccess για υποκατάλογο

Μόλις αναπτύξουμε την εφαρμογή React στον διακομιστή, μπορούμε να έχουμε πρόσβαση στην εφαρμογή. Εάν θα προσπαθήσετε να αποκτήσετε πρόσβαση στην εφαρμογή μέσω του ριζικού τομέα ακολουθούμενο από τον κατάλογο (example.com/app), θα επιστρέψει 404. Δεν θα είναι προσβάσιμος κατάλογος μέσω της διεύθυνσης URL. Έτσι, για να διαχειριστείτε την ανακατεύθυνση, θα χρειαστεί να προσθέσετε ένα απλό .htaccess αρχείο για να πει στον διακομιστή να επιστρέψει στο δικό μας index.html αρχείο. Αυτή είναι η ίδια διαμόρφωση που θα χρησιμοποιούσαμε εάν η εφαρμογή βρισκόταν στη ρίζα του διακομιστή, απλώς με διαφορετική απόλυτη διαδρομή προς το αρχείο ευρετηρίου μας.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /app/index.html [L]
</IfModule>

Αυτό είναι. Τώρα, μπορείτε να ανανεώσετε τη σελίδα και να προσπαθήσετε να αποκτήσετε πρόσβαση στη διεύθυνση URL της εφαρμογής (example.com/app).

Σχετίζεται με