web app tutorial
1.0.0
Diese Tutorial Node.js -App kann hier zugegriffen werden.
Diese Knoten -Web -App ist eine React -Web -App, die von Express bedient wird. Es wird angedockt und dann auf AWS Elastic Beanstalk veröffentlicht.
Erstellen Sie zunächst eine React-App mit dem Namen "My-App" und gehen Sie in den Ordner:
npx create-react-app my-app
cd my-app
Installieren und speichern Sie dann Express:
npm install express --save
Sobald Sie die oben genannten Schritte abgeschlossen haben, können Sie die React -App im Entwicklungsmodus ausführen: npm run start
Erstellen Sie "server.js" -Datei wie folgt und speichern Sie sie im Projektstammordner:
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
const PORT = process.env.PORT || 8080;
const HOST = '0.0.0.0';
app.get('/hello', (req, res) => {
return res.send('Hello World!')
});
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(PORT);
console.log(`Running on http://${HOST}:${PORT}`);
In der Datei package.json fügen Sie hinzu:
"proxy": "http://localhost:8080"
Nachdem Sie die oben genannten Schritte beendet haben, können Sie Build auf Ihrer React -App ausführen:
npm run build
und reiten Sie Express aus, um die React -App zu servieren:
node server.js
Melden Sie sich für Docker an, um Docker zu verwenden und nach Bedarf Docker und/oder Docker -Desktop zu installieren. Erstellen Sie nach Abschluss der Docker -Installation eine Datei mit dem Namen "Dockerfile", indem Sie ausgeführt werden:
touch Dockerfile
Geben Sie in der Dockerfile das Bild an, aus dem Sie erstellen möchten. Die neueste Bildnummer für Node.js App ist im Docker Hub verfügbar.
FROM node:14
Erstellen Sie als nächstes das Arbeitsverzeichnis Ihrer App:
WORKDIR /usr/src/app
Kopieren Sie dann Ihr Paket.json und installieren Sie die Abhängigkeiten, indem Sie die folgenden Zeilen hinzufügen:
COPY package*.json ./
RUN npm install
Um den Quellcode in Ihrer App zu bündeln, fügen Sie hinzu:
COPY . .
Ihre App wird auf Port 8080 ausgeführt. Fügen Sie also diese Zeile hinzu:
EXPOSE 8080
Geben Sie den Befehl zum Starten Ihrer App an:
CMD [ "node", "server.js" ]
Die vollständige Dockerfile sollte so aussehen:
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "node", "server.js" ]
Erstellen Sie .Dockerignore-Datei und fügen Sie die Zeilen wie folgt hinzu: node_modules npm-debug.log Dies verhindert, dass lokale Knotenmodule und Debug-Protokolle in das Docker-Bild kopiert werden. Screenshot von .dockerignore: 
Führen Sie den folgenden Befehl aus, um das Docker -Bild zu erstellen:
docker build -t <your username>/<your app name> .
Um das erstellte Bild auf Port 49160 auszuführen, rennen Sie:
docker run -p 49160:8080 -d <your username>/<your app name>
Die -P -FLABE leitet einen öffentlichen Hafen in einen privaten Hafen im Container um.
Um zu bestätigen, dass das Bild ausgeführt wird, rennen Sie:
docker ps
Um ein Remote -Docker -Image für AWS Elastic Beanstalk bereitzustellen, drücken Sie das Bild in Docker Hub:
docker push <your username>/<your app name>:latest
Erfahren Sie mehr
Als Referenz hat Node.js eine Anleitung zum Dockieren einer Node.js -App hier veröffentlicht.
Wenn Sie zuvor noch keine AWS -Elastizitätsscheibe verwendet haben, können Sie mit dem Lesen der Dokumentationen beginnen.
Erstellen Sie die Datei dockkerrun.aws.json wie folgt:
{
"AWSEBDockerrunVersion": "1",
"Image": {
"Name": "your-docker-username/repo-name",
"Update": "true"
},
"Ports": [
{
"ContainerPort": "8080"
}
]
}
Dies beinhaltet Informationen zum Remote -Docker -Bild, an dem elastische Beanstalk gezogen werden sollte. Wir erstellen dann eine elastische Beanstalk -App für die Beanstalk und laden diese Datei hoch.
Um Ihre App auf Elastic Beanstalk einzurichten, gehen Sie zunächst zu Elastic Beanstalk Console -> Anwendungen und klicken Sie auf "Erstellen einer neuen Anwendung".
Geben Sie Ihren Bewerbungsnamen ein: 
Klicken Sie auf "Eine neue Umgebung erstellen" für die gerade erstellte App: 
Wählen Sie für diese App 'Web Server -Umgebung': 
Wählen Sie für "Plattform" "Docker" und die Plattformabteilung und -version, wie Sie möchten.
Für "Anwendungscode" wählen Sie "Ihren Code hochladen" und dockenrun.aws.json hochladen, die Sie gerade erstellt haben: 
Navigieren Sie zu "Konfigurieren Sie mehr Optionen" und wählen Sie eine voreingestellte Konfiguration oder erstellen Sie eine Konfiguration, die einen Lastausgleich enthält. 
Die App wird in einem Moment erstellt und wird unter der Adresse der Elasticbeanstalk eingesetzt: 
Erfahren Sie mehr
Als Referenz verfügt AWS über Dokumentationen zum Bereitstellen von Docker -Containern auf AWS Elastic Beanstalk.
Sie können eine Domänenadresse auf jeder Plattform kaufen, wie Sie möchten. In diesem Beispiel wird gezeigt, wie Sie Ihre bereitgestellte App mit einer von Google Domains gekauften Adresse verbinden.
Wählen Sie zuerst einen Domainnamen, den Sie mögen, und kaufen Sie ihn.
Die Domain -Adresse wird nach dem Kauf in Ihrem Google Domains -Konto angezeigt. Gehen Sie zu 'DNS' im linken Menü und scrollen Sie zu "benutzerdefinierten Ressourcensätzen"
Fügen Sie einen CNAME -Datensatz hinzu und geben Sie Ihre elastische Beanstalk -App -Adresse als "Daten" und "www" als "Name" ein: 
Wir müssen auch benutzerdefinierte Namenserver auf der "DNS" -Seite hinzufügen. Wir werden dies im Abschnitt "Namenserver" tun. 
Laut AWS "sagt eine gehostete Zone Route 53, wie man auf DNS -Abfragen für eine Domain reagiert". Erstellen wir zuerst eine gehostete Zone auf der AWS -Route 53.
Navigieren Sie zur Route 53 in AWS -Konsole und dann zu "gehosteten Zonen".
Klicken Sie auf "Hosted Zone erstellen" und geben Sie die gerade gekaufte Domänenadresse ein: 
Eine gehostete Zone wird erstellt: 
Kopieren Sie die für den Typ 'ns' aufgeführten Werte eins nach eins zu "benutzerdefinierten Namensservern" in Google Domains: 
Beachten Sie , dass Änderungen, die in Google Domains vorgenommen wurden, bis zu 48 Stunden dauern können.
Um HTTPS einzurichten, sollten wir ein SSL -Zertifikat auf AWS erhalten und es mit der Domänenadresse verknüpfen.
