So erstellen Sie mit Docker ~ Express ~ eine [TypeScript + Vue + Express + MySQL] -Umgebung
Inhalt
Wir werden einen Express API-Servercontainer auf Docker erstellen und eine Umgebung erstellen, die eine einfache Antwort zurückgibt.
Bis zum vorherigen Artikel haben wir einen Anwendungscontainer / DB-Container erstellt. Dieses Mal erstellen wir jedoch einen API-Servercontainer, der sie verbindet und die Daten tatsächlich an die Rezeption weiterleitet.
Da die Serverseite viel Volumen hat, sind die Artikel zur Grundkonstruktion von Express und zur Einführung von Sequelize getrennt.
Erstellen einer Umgebung für [TypeScript + Vue + Express + MySQL] mit Docker ~ Vue Edition ~ Erstellen einer Umgebung von [TypeScript + Vue + Express + MySQL] mit Docker ~ MySQL Edition ~
Arbeitsablauf
- Erstellen Sie einen API-Container
- Einführung von ts-node / nodemon
- Express-Serveraufbau
- Routing-Einstellungen
- API-Handler-Einstellungen
- Erstellen Sie eine API-Vorlage
1. Erstellen Sie einen API-Container
docker-compose.yml
version: "3"
services:
app:
container_name: app_container
build: ./docker/app
ports:
- 8080:8080
volumes:
- ./app:/app
stdin_open: true
tty: true
environment:
TZ: Asia/Tokyo
command: yarn serve
#Von hier aus hinzufügen
api:
container_name: api_container
build: ./docker/api
ports:
- 3000:3000
volumes:
- ./api:/api
tty: true
environment:
CHOKIDAR_USEPOLLING: 1
TZ: Asia/Tokyo
depends_on:
- db
#Addiere hier
db:
container_name: db_container
build: ./docker/db
image: mysql:5.7
ports:
- 3306:3306
volumes:
- ./db/conf/my.cnf:/etc/mysql/conf.d/mysql.cnf
- ./db/init_db:/docker-entrypoint-initdb.d
- test_data:/var/lib/mysql
environment:
- MYSQL_DATABASE=${MYSQL_DATABASE}
- MYSQL_USER=${MYSQL_USER}
- MYSQL_PASSWORD=${MYSQL_PASSWORD}
- MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
- TZ="Asia/Tokyo"
volumes:
test_data:
docker/api/Dockerfile
FROM node:12.13-alpine
ENV NODE_PATH /usr/local/lib/node_modules
WORKDIR /api
Bestätigung starten
$ docker-compose up -d
$ docker ps
OK wenn api_container gestartet wird!
API-Container-Zugriff
$ docker exec -it api_container sh
2. Einführung von ts-node / nodemon
Stellen Sie die erforderlichen Bibliotheken vor
$ yarn init
$ yarn add --dev typescript ts-node prettier @types/node
.prettierrc
{
"singleQuote": true,
"semi": false
}
tsconfig init
$ ./node_modules/.bin/tsc --init
Da tsconfig.json generiert wird, werden wir darauf basierend eine Anwendung erstellen.
tsconfig.json
"include": ["./**/*"] //Zum Ende hinzufügen
package.json
"scripts": {
"ts-node": "ts-node index.ts"
},
Stellen Sie das Skript so ein, dass die TypeScript-Datei auf dem ts-Knoten ausgeführt werden kann.
api/index.ts
const message: string = 'Prüfung'
console.log(message)
Erstellen Sie eine Hauptdatei, um TypeScript auszuführen. Geben Sie einen Dummy ein, um zu überprüfen, ob der ts-Knoten ordnungsgemäß funktioniert.
Prüfung
$ yarn ts-node
Wenn TypeScript kompiliert und die obige Meldung angezeigt wird, ist es OK!
Nodemon eingeführt
Wir werden eine Bibliothek einführen, die automatisch erstellt wird, wenn sich die Datei ändert.
$ yarn add --dev nodemon
nodemon.json
{
"watch": ["api/**/*"],
"ext": "ts",
"exec": "ts-node ./index.ts"
}
Erstellen Sie eine Nodemon-Konfigurationsdatei. Führen Sie ts-node über nodemon aus und legen Sie alles direkt unter dem zu überwachenden API-Verzeichnis fest.
package.json
"scripts": {
"tsc": "tsc",
"ts-node": "ts-node index.ts",
"nodemon": "nodemon"
},
docker-compose.yml
api:
container_name: api_container
build: ./docker/api
ports:
- 3000:3000
volumes:
- ./api:/api
tty: true
environment:
CHOKIDAR_USEPOLLING: 1
TZ: Asia/Tokyo
depends_on:
- db
command: yarn nodemon #Füge diesen Kerl hinzu
Fügen Sie einen Befehl hinzu, der beim Start des Containers automatisch über nodemon gestartet wird.
3. Express-Serveraufbau
Damit sind die Einstellungen für TypeScript-Ausführung und automatische Erstellung beim Ändern abgeschlossen. Von hier aus werden wir Express erstellen, den eigentlichen API-Server.
$ yarn add express
$ yarn add --dev @types/express
api/index.ts
import express from 'express'
const app = express()
const port = 3000
app.get('/', (req, res) => res.send('Test Express!'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
Bestätigung starten
$ exit //Raus aus dem Container
$ docker-compose stop //Stoppen Sie den Behälter
$ docker-compose up -d //Neustart des Containers
Wenn Sie auf localhost: 3000 zugreifen und "Test Express!" Angezeigt wird, wird die Antwort problemlos zurückgegeben! Ändern Sie für alle Fälle eine andere Nachricht in "Test Express!" In index.ts und überprüfen Sie, ob sich die Nachricht ändert, wenn Sie erneut auf localhost: 3000 zugreifen. Wenn es sich automatisch ändert, funktioniert nodemon ordnungsgemäß und der automatische Build ist abgeschlossen!
4. Routing-Einstellungen
Derzeit kann nur mit localhost: 3000 darauf zugegriffen werden. Ich möchte die API jedoch gemäß der unten gezeigten URL aufrufen, um das Routing festzulegen.
Beispiel)
- localhost:3000/api/tests
- Holen Sie sich alle Daten in der Testtabelle
- localhost:3000/api/tests/1
- Daten mit der ID 1 aus der Testtabelle abrufen
- localhost:3000/api/users
- Holen Sie sich alle Daten aus der Benutzertabelle
api/routes/index.ts
import Express from 'express'
const router = Express.Router()
export default router
api/routes/tests/testsController.ts
import { Router } from 'express'
const router = Router()
export default router
Dies ist das Ende der Vorverarbeitung, und wir werden das Routing tatsächlich angeben. Dieses Mal wird es so geändert, dass mit "localhost: 3000 / api / tests" darauf zugegriffen werden kann.
api/routes/index.ts
import Express from 'express'
const router = Express.Router()
router.get('/', (req, res, next) => {
res.send('Prüfung')
})
export default router
api/index.ts
import express from 'express'
import router from './routes/index'
const app = express()
const port = 3000
app.use('/api', router)
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
[App.use ('/ api', Router)] oben eingestellt Mit dieser Einstellung wird beim Übergeben von localhost: 3000 / api das Routing von routen / index.ts verschoben. Lassen Sie uns den Vorgang überprüfen.
Zugang mit localhost: 3000 / api Wenn ** test ** angezeigt wird, ist es OK!
In einer tatsächlichen Anwendung muss der Endpunkt beim Zugriff auf mehrere DBs verzweigt werden. Stellen Sie daher das Routing so ein, dass es wie unten gezeigt verzweigt.
localhost: 3000 / api / ** {Zweig nach diesem Wert} **
api/routes/tests/testsController.ts
import { Router } from 'express'
const router = Router()
router.get('/', (req, res, next) => {
res.send('Routing abgeschlossen!')
})
export default router
api/routes/index.ts
import Express from 'express'
import tests from './tests/testsController'
const router = Express.Router()
router.use('/tests', tests)
export default router
Bestätigung!
Zugriff auf localhost: 3000 / api / tests Wenn "Routing abgeschlossen!" Angezeigt wird, ist es OK!
Damit sind die Routing-Einstellungen abgeschlossen!
Rezension
- api/index.ts --Catch localhost: 3000 / api und Pfad zu route / index.ts
- api/routes/index.ts --Catch / tests und weitergeben an tests / testsController.ts
- api/routes/tests/testsController.ts
- Gibt eine Antwort zurück, wenn es kein Ende gibt
5. API-Handler-Einstellungen
Erstellen Sie als Nächstes einen Handler, der zwischen einem Muster, das eine normale Antwort zurückgibt, und einer Antwort wechselt, wenn ein Fehler auftritt.
api/constants/error.ts
export type ErrorCode = {
status: number
type: string
message: string
}
/**
*Fehler, wenn die Parameter falsch sind
*/
export const PARAMETER_INVALID: ErrorCode = {
status: 400,
type: 'PARAMETER_INVALID',
message: 'The parameter is invalid.',
}
/**
*Fehler, wenn keine Daten vorhanden sind
*/
export const NO_DATA_EXISTS: ErrorCode = {
status: 400,
type: 'NO_DATA_EXISTS',
message: 'No data exists.',
}
Wenn die Anzahl der Fehlermuster zunimmt, erhöhen wir hier den Fehlercode.
api/core/handler.ts
import { Request, Response } from 'express'
import { ErrorCode } from '../constants/error'
/**
*Funktion zur Behandlung der API
*/
export class Handler {
constructor(private req: Request, private res: Response) {}
/**
*Daten senden
*/
json<T>(data: T): void {
this.res.json({ data: data })
}
/**
*Fehler senden
*/
error(error: ErrorCode): void {
this.res.status(error.status).send({ error: error })
}
}
Wenn ein Fehler in der API auftritt, wird zu einer Fehlerausgabe verzweigt, und wenn dies normal ist, wird er im JSON-Format zurückgegeben.
6. Erstellen Sie eine API-Vorlage
Erstellen Sie eine API-Vorlage, die beim Zugriff auf localhost alle Daten aus der Testtabelle abruft: 3000 / api / test.
api/routes/tests/get_tests.ts
import { Request, Response } from 'express'
import { Handler } from '../../core/handler'
export class GetTests {
handler: Handler
constructor(req: Request, res: Response) {
this.handler = new Handler(req, res)
}
/**
*Hauptverarbeitung
*/
async main() {
const data = this.getTests()
return this.handler.json(data)
}
/**
*Gibt eine Nachricht zurück
*/
getTests() {
const message = 'get_Tests laufen'
return message
}
}
Dies ist die API, die tatsächlich aufgerufen wird
api/routes/tests/testsController.ts
import { Router } from 'express'
import { GetTests } from '../tests/get_tests' //Importieren Sie die obige API
const router = Router()
router.get('/', (req, res, next) => {
new GetTests(req, res).main().catch(next) //Veränderung
})
export default router
Bestätigung!
localhost:3000/api/tests
Es ist in Ordnung, wenn es im JSON-Format wie folgt zurückgegeben wird!
Zusammenfassung
Danke für deine harte Arbeit! Zu diesem Zeitpunkt verfügen Sie über einen Anwendungscontainer, einen DB-Container und einen API-Servercontainer. Ab dem nächsten Mal werde ich jeden Container verbinden und die DB-Daten tatsächlich an die Front übergeben und zeichnen!
Erstellen einer Umgebung für [TypeScript + Vue + Express + MySQL] mit Docker ~ Vue Edition ~ Erstellen einer Umgebung von [TypeScript + Vue + Express + MySQL] mit Docker ~ MySQL Edition ~ Erstellen einer Umgebung von [TypeScript + Vue + Express + MySQL] mit Docker ~ Express ~ So erstellen Sie mit Docker ~ Sequelize ~ eine Umgebung aus [TypeScript + Vue + Express + MySQL]
Recommended Posts