Présenté par EsC (AKA Ryan Smith)

Comment déployer la pile de l'application MERN (Mongo Express React Node) sur AWS EC2 - LA BONNE MANIÈRE!

*********** Video Walk Through ICI! ************

Ce tutoriel explique comment déployer votre application de pile MERN sur une instance Ubuntu 16.04 Amazon Web Services (AWS) EC2. Cela peut également être fait avec d'autres services comme Digital Ocean ou Linode, car ils offrent des instances Ubuntu 16.04.

- - - - - -

Mon petit coup de gueule: je dois dire que, lorsque j'ai appris React.js pour la première fois, je l'ai utilisé comme une pile complète avec Mongo DB, Node.js et Express.js, et le moment est venu de le déployer .. C'était un enfer littéral !! AWS EC2, comme beaucoup de mes amis et moi le disons, peut être un «trou noir de confusion!». Au moins au début… Quoi qu'il en soit, j'ai déployé une bonne quantité d'applications pour la pratique, mais JAMAIS pour une pile MERN, et à cause de tous. les pièces mobiles séparées, et le fait que vous ayez à vous soucier d’un avant et d’un arrière, c’était une aventure constante et erronée! Sans parler des seuls tutoriels très rares que j'ai trouvés en ligne, et après des heures de recherches approfondies, aucun d'entre eux n'a fonctionné… Surtout ce petit bâtard qui nous a demandé de fourchir la plaque de la chaudière de quelqu'un d'autre, oh mon Dieu, tu sais de qui je parle si vous recherchiez ce type de tutoriel… DIEU AWFUL! Quoi qu’il en soit, rien de ce que je pouvais trouver ne fonctionnait, du moins pas pour mon projet… Après avoir cherché et cherché, j’ai enfin réalisé que je devais trouver une solution. Et quand je l'ai compris, j'ai juré de faire le meilleur tutoriel à ce sujet! Le genre de tutoriel que grand-père racontera à ses petits-enfants autour d'un feu en buvant du whisky! Bien les geeks et les nerds! Aujourd'hui est ce jour! Voici le didacticiel de déploiement complet de MERN! Merci d'avoir supporté mon aération désagréable… C'ÉTAIT À ÊTRE DIT !! ;)

- - - - - -

  • REMARQUE * ASSUREZ-VOUS QUE CELUI-CI A ÉTÉ AJOUTÉ DANS VOTRE SERVEUR.JS !:

const path = require («path»);
app.use (express.static (path.join (__ nom de répertoire, «client / build»))))

- - - - - -

  • Veillez également à accéder à votre dossier principal APPNAME et à ajouter un fichier .gitignore:
  • Ouvrez Gitbash (windows) Terminal (mac) et tapez
  • CD dans votre répertoire d'applications
touchez .gitignore

Ajoutez ce qui suit à .gitignore:

/ node_modules
package-lock.json

- - - - -

Maintenant,

Créez une instance aws / ec2:

  • Entrez AWS et cliquez sur Lancer une nouvelle instance.
  • Sélectionnez Ubuntu 16.04 LTS
  • Sélectionnez t2.micro
  • Définir les paramètres de sécurité:
  • Ajoutez http et https, définissez-les sur:
  • ssh 0.0.0.0, (Partout ou myIP)
  • http 0.0.0.0 (n'importe où)
  • https 0.0.0.0 (N'importe où, ou ne le configure pas)
  • Téléchargez une clé .pem à partir d'AWS ou utilisez une clé existante

NOTE * Cette clé PEM est l'accès à votre serveur Ubuntu déployé sur aws. Mettez-le dans un endroit sûr, à part du répertoire de votre application et ne le poussez JAMAIS dans github.

  • Déplacez le fichier .pem dans un dossier approprié de votre système.
  • créer une instance

Images:

* NOTE * NE PAS “REVIEW AND LAUNCH”! CLIQUEZ SUR «SUIVANT: CONFIGURER LES DÉTAILS DE L’INSTANCE»!

- - - - - - - - - - - - - - - - - - - - - - - - -

Retournez à vos instances aws,

  • * Faites un clic droit * sur votre instance nouvellement créée et cliquez sur «Connecter»
  • ouvrez git bash (windows) ou terminal (mac) et cd dans le répertoire dans lequel vous avez enregistré le pemkey particulier pour cette instance,
  • Suivez les étapes sur la fenêtre qui apparaît après avoir cliqué sur Connecter

Tapez dans le terminal:

chmod 400 {{PemKeyName.pem}}

SSH sur votre serveur Ubuntu:
* Note * copier le ssh - lien juste sous exemple:

ssh -i “PemKeyName.pem” ubuntu@ec2–18–222–194–136.us-east-2.compute.amazonaws.com

Une fois que SSHed dedans, alors à partir de là, c'est surtout copier et coller! Il y aura quelques parties où vous devrez entrer des informations, mais la plupart de ceci est copier et coller à partir d'ici.

Tapez terminal / gitbash:

Oui
sudo apt-get update
sudo apt-get install -y build-essential openssl libssl-dev pkg-config

- - - - - - - - - - - - - -

Configuration de Node.js:

sudo apt-get install -y build-essential openssl libssl-dev pkg-config
sudo apt-get install -y nodejs nodejs-legacy
sudo apt-get install npm -y
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo apt-get installez nginx git -y

Lorsque vous clonez le repo sur le serveur Ubuntu:

  • * Note * Git / Github: Je ne vous montrerai pas comment pousser / créer des dépôts à partir de votre git / github… Mais je vais vous montrer où attraper le lien de référentiel pour le clonage:

- - Si vous voulez voir un tutoriel sur la façon de créer et de pousser vos référentiels, consultez ici:

  • COMMENT CRÉER
  • COMMENT PUSH

Copier à partir d'ici:

cd / var / www
sudo git clone {{votre chemin de fichier de projet sur github / git}}

NOTE - Ne pas installer npm pour l'instant! - pour plus d'informations à ce sujet plus tard! - Pour l'instant, passez aux étapes suivantes.

SetUp Nginx:

sudo apt-get install -y build-essential openssl libssl-dev pkg-config
cd / etc / nginx / sites-available
sudo vim {{le nom de votre repo cloné}}

- Remarque Ceci ouvrira un fichier vide, mais lorsque vous entrez les informations ci-dessous et que vous les enregistrez, le fichier sera créé avec les informations que vous avez entrées.
 - Remarque vim est un éditeur de texte basé sur un terminal. Pour plus d'informations, voir: vim-adventures.com/ ou d'autres outils d'apprentissage de vim. Les commandes clés pour nous sont -

commandes vim:
i = qui nous permet de taper ou d'insérer du texte
esc = qui éteint l'insert
: wq = que nous utilisons pour écrire (aussi appelé sauvegarde) et quitter

Ajoutez le code suivant au fichier que vous venez de créer à l’aide de vim. Passez en mode insertion en cliquant sur i. Modifiez les deux espaces réservés à l'intérieur des doubles accolades {{}} pour qu'ils correspondent à vos spécifications.

serveur {
    écoutez 80;
    emplacement / {
        proxy_pass http: // {{IP PRIVÉE À PARTIR DE L’INSTANCE EC2}}: {{NODE-PROJECT-PORT}};
        proxy_http_version 1.1;
        proxy_set_header Mise à niveau $ http_upgrade;
        proxy_set_header Connexion 'mise à niveau';
        proxy_set_header Host $ host;
        proxy_cache_bypass $ http_upgrade;
    }
}

Format correct ci-dessous:

Appuyez sur la touche ESC et tapez dans le terminal:

hit: esc
type:: wq
hit: touche d'entrée

Supprimez la valeur par défaut du répertoire sites-available de nginx:

sudo rm default

Créez un lien symbolique de sites activés à sites disponibles:

sudo ln -s / etc / nginx / sites-available / {{nom du repo}} / etc / nginx / sites-enabled / {{nom du repo}}

Supprimez la valeur par défaut du répertoire de nginx activé pour les sites:

sudo rm / etc / nginx / sites-enabled / default
Installation de pm2 et mise à jour des dépendances du projet:
sudo npm install pm2 -g
cd / var / www /
sudo chown -R ubuntu {{AppName}}
cd {{AppName}}
sudo npm install

ensuite,

client cd
sudo npm install
  • NOTE * Lancez seulement la construction SI vous n’avez pas poussé votre dossier de construction sur votre github! Si cela ne fonctionne pas, vous l'avez probablement déjà! passez!
sudo npm run build

- Pour les informations de la base de données mongo:
Principal: SITE MONGO

Tapez dans le terminal: * NOTE * Ceci est une ligne! Copiez le tout et collez-le !:

sudo apt-key adv --keyserver hkp: //keyserver.ubuntu.com: 80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4
echo "deb [arch = amd64, arm64] https://repo.mongodb.org/apt/ubuntu xenial / mongodb-org / 4.0 multivers" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.0.list

ensuite,

sudo apt install udo
sudo apt-get update
sudo apt-get install -y mongodb-org
  • NOTE * Si cela vous pose un problème non authentifié, tapez ceci à la place:
sudo apt-get install -y mongodb-org --allow-unauthenticated

Puis créez data / bd:

sudo mkdir / data
sudo mkdir / data / db
sudo service mongod start

Vérifiez l'état de votre service. Utilisez ctrl C lorsque vous avez terminé:

statut de service sudo

Maintenant, nous voulons que Mongo démarre automatiquement au démarrage du système:

sudo systemctl enable mongod && sudo systemctl démarrer mongod
cd / var / www / {{nom du repo}}

Commencez votre projet pm2:

pm2 start server.js

Redémarrez nginx:

sudo service nginx stop && sudo service nginx start

NOTE- NE PAS FAIRE CECI, juste pour info si vous voulez arrêter pm2:

arrêt pm2

À ce stade, vous devriez pouvoir accéder à votre adresse IP publique AWS et voir votre projet en direct!

Retournez à votre instance EC2, dans la fenêtre inférieure des informations pour ladite instance sélectionnée, copiez l'adresse IP PUBLIC, puis collez-la dans votre navigateur!

  • REMARQUE * Si votre déploiement n'a pas fonctionné, je vous promets que vous avez commis une erreur au cours du processus ou que votre application elle-même est en cause. J'ai personnellement testé cette méthode avec plusieurs applications de pile MERN avec un taux de réussite de 100%. J'espère que cela a aidé!

Utilisez les journaux pm2 pour afficher les journaux de vos différentes instances pm2. Cela vous donnera les détails de cette instance:

pm2 show {{pm2 instance id}}

AJOUT D'INFO DE DOMAINE PERSONNALISÉ CI-DESSOUS!

* NOTE * SI VOUS UTILISEZ REDUX !! *

SEULEMENT LES PERSONNES QUI ONT EXTENSION DE REDUX DEV TOOLS SUR CHROME PEUVENT VOIR VOTRE APP DÉPLOYÉE… LES PERSONNES QUI ONT CETTE EXTENSION, (TELLES QUE VOUS-MÊME), VOIRONT CELLE-CI, MAIS LES AUTRES SANS CETTE EXTENSION. Malheureusement, je déteste dire que je suis en train de regarder dedans, et l'ai fait bouillir dans le fichier store.JS dans votre application réelle. LA SOLUTION SE TROUVE QUELQUE PART AVEC:

composeWithDevTools () à partir du paquetage redux-devtools-extension.

DÈS QUE JE LE COMPRENDRA, JE LE METTRE À JOUR ICI. POUR LA PLUPART DES PARTIES, CES INSTRUCTIONS DEVRAIENT VOUS DONNER UNE APPLI DÉPLOYÉE RÉUSSIE.

Ajouter votre nom de domaine personnalisé à votre serveur déployé !:

Cela peut varier en fonction de l’origine du nom de domaine. Toutefois, les étapes décrites dans ces instructions sont généralement très similaires à celles de la plupart des services de domaine. Si ce n'est pas le cas, votre service de noms de domaine devrait pouvoir vous fournir des instructions sur l'utilisation de votre DNS pour votre propre déploiement.

Dans notre cas ici, nous allons utiliser mon préféré, godaddy.com -

GO DADDY INSRUCTIONS CI-DESSOUS:

En gros, connectez-vous à votre service de domaine et ajoutez votre adresse IP à partir de votre instance EC2 dans votre chemin de domaine.

  • Connectez-vous à votre compte GoDaddy.
  • Allez dans Gérer votre domaine> Fichier de zone DNS.
  • Remplacez l’adresse IP de l’enregistrement @ par l’adresse IP publique de l’EC2 et enregistrez les modifications.
  • GoDaddy peut prendre quelques minutes pour mettre à jour votre adresse IP.

Ça devrait être ça! Cela prendra quelques minutes, mais maintenant, lorsque quelqu'un tape dans ce domaine, il extrait votre serveur déployé de l'adresse IP saisie.

S'il vous plaît aimer et partager si cela vous a aidé! Si vous souhaitez soutenir, ou avez des questions ou des critiques constructives, s'il vous plaît visitez moi à RyanKenSmith.com.