Comment créer un environnement [TypeScript + Vue + Express + MySQL] avec Docker ~ Vue ~

Contenu

Cet article étudie Vue mais souhaite créer une application basée sur TypeScript! C'est un contenu pour créer un environnement à partir de zéro pour ceux qui disent! Au fait, je vais le construire avec Docker et créer une application qui s'exécute sous l'environnement du conteneur!

En ce qui concerne la configuration, je viserai un environnement où Docker + Vue.js + Express (Node.js) + MySQL est construit basé sur TypeScript et a une extensibilité de module!

• Ceci est le premier article, donc je pense qu'il y a certains points qui ne peuvent pas être atteints, mais je vous serais reconnaissant de bien vouloir le souligner.

État de visée

1. Conteneur d'application

• Vue + Vuex + Vuetify + TypeScript

2. Conteneur de serveur API

• Express + Sequelize + TypeScript

3. Conteneur de base de données

• MySQL

"Vue-> Vuex-> Communication HTTP (Axios) -> API (Express) -> Acquisition de données MySQL (Sequelize) -> Réponse du magasin (Express) -> Vue" Ce sera le flux.

Personne cible

--Docker, Docker-Compose est déjà installé (disponible)

• Comprendre les bases de JavaScript / Vue.js

Le but est de créer rapidement un environnement sur Docker, et cela ne couvre pas Docker en détail. Qu'est-ce que Docker en premier lieu? Nous vous recommandons de vous référer à l'article suivant. [Illustration] Comprendre toute l'image de Docker -Partie 1-

Procédure de travail

Édition Vue

1. Créer un conteneur d'application
2. Créez une application Vue sur un conteneur
3. Automatisez l'exécution de l'application au démarrage du conteneur
4. Présentation des principales bibliothèques de Vue
5. Présentation de Vuetify
6. Créez une application de compteur pour les tests

Édition MySQL

1. Créez un conteneur DB
2. Saisie des données de test
3. Accès à MySQL

Comment créer un environnement de [TypeScript + Vue + Express + MySQL] avec Docker ~ MySQL edition ~

Edition Express

1. Créer un conteneur API
2. Introduction de ts-node / nodemon
3. Construction du serveur express
4. Paramètres de routage
5. Paramètres du gestionnaire d'API
6. Créer un modèle d'API

Comment créer un environnement de [TypeScript + Vue + Express + MySQL] avec Docker ~ Express ~

Édition Sequelize

1. Configurer un réseau entre les conteneurs
2. Introduction de Sequelize
3. Création de modèles
4. Complétez l'API GetTests
5. Appelez l'API avec Axios depuis l'avant
6. Liez et restituer la réponse à Vuex

Comment créer un environnement de [TypeScript + Vue + Express + MySQL] avec Docker ~ Sequelize ~

1. Créez un conteneur d'application

Tout d'abord, créez un fichier pour créer un conteneur avec docker-compose. Créez les fichiers requis avec la configuration suivante.

root
├─ docker
│    └─ app
│        └─ Dockerfile
└─ docker-compose.yml

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

Il s'agit du fichier de configuration de base de docker-compose. Nous ajouterons un conteneur de serveur API et un conteneur DB plus tard, mais nous ne créerons qu'une seule fois le conteneur APP.

Dockerfile

FROM node:12.13-alpine

RUN yarn global add @vue/cli

WORKDIR /app

Cette fois, nous utiliserons le alpin léger comme image de base. Puisque vue-cli est utilisé dans le conteneur, effectuez une installation globale.

Construction de conteneur

$ docker-compose build

Construisez l'image sous le document de conception créé précédemment

Conteneur / démarrage

$ docker-compose up -d

Démarrez en fait le conteneur construit. Ajoutez -d pour démarrer en mode détaché (arrière-plan).

Vérifiez le conteneur en cours d'exécution

$ docker ps

Ce qui suit est le résultat de la sortie, vérifions donc s'il est réellement démarré.

CONTAINER ID   IMAGE   COMMAND   CREATED   STATUS    PORTS     NAMES
//OK si le conteneur créé est affiché ici

2. Lancez l'application Vue sur le conteneur

Maintenant que vous avez un conteneur de base, vous pouvez en fait aller à l'intérieur du conteneur et créer votre application.

Conteneur d'accès

$ docker exec -it app_container sh

/app # 　//Si cela se produit, vous pouvez accéder au conteneur

Création de l'application Vue

$ vue create app

Sélection manuelle Avec TypeScript Avec routeur Avec Vuex Babel ** Aucun **

La version est 2.x. Utiliser la syntaxe des composants de style classe? Oui ** * Ceci est important ** yarn ** * Je vais utiliser Yarn pour le paquet. ** ** Le reste est votre choix.

Commencez

$ cd app
$ yarn serve

Si vous accédez à localhost: 8080 et qu'il s'affiche, c'est OK!

Jusqu'à présent, vous avez créé une application à l'intérieur du conteneur et exécuté l'application à partir de l'intérieur du conteneur. Comme ce travail est gênant à chaque fois, nous allons configurer l'application à l'intérieur pour qu'elle s'exécute automatiquement lorsque le conteneur est démarré.

Arrêtez l'application une fois

$ controll + c

Sortez du conteneur

$ exit

Arrêter le conteneur

$ docker-compose stop

3. Automatisez l'exécution de l'application au démarrage du conteneur

Changer la structure des répertoires

Le répertoire de l'application directement sous la racine est ennuyeux, alors allez quelque part.

Before

root
├─ app                //Porté ici(Ce gars est supprimé)
│    └─ app           //Chaque ce répertoire
│        ├─ node_modules
│        ├─ public
│        ├─ src
│ Autres
│
├─ docker
│    └─ app
│         └─ Dockerfile
└─ docker-compose.yml

After

root     
├─ app     
│   ├─ node_modules
│   ├─ public
│   ├─ src
│ Autres
│
├─ docker
│    └─ app
│         └─ Dockerfile
└─ docker-compose.yml

Commande de démarrage ajoutée au fichier de configuration de composition

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  //Ajouter ce gars

Démarrage du conteneur

$ docker-compose up -d

Si vous accédez à localhost: 8080 dans cet état et que l'application est lancée, c'est réussi! L'application sera lancée lorsque le conteneur docker sera lancé sans service de fil!

Introduction de plus joli (favori)

Je déteste les points-virgules JavaScript, donc je vais vous présenter Prettier qui formatera automatiquement. N'hésitez pas à utiliser cette zone.

Accéder au conteneur

$ docker exec -it app_container sh

Une installation plus jolie

$ yarn add prettier --dev

Créer une application / **. Prettierrc **

{
  "singleQuote": true,
  "semi": false
}

4. Introduction des principales bibliothèques Vue

En fait, c'est mon préféré cette fois. Lors de l'écriture de Vue en TypeScript, nous allons introduire une bibliothèque qui peut être écrite proprement et intuitivement en utilisant un décorateur (@). À l'avenir, les fichiers Vue présenteront des styles d'écriture inconnus, mais ces bibliothèques sont belles et bien rangées.

• vue-class-component
• vue-property-decorator
• vuex-class
• vuex-module-decorators

$ yarn add vue-class-component vue-property-decorator vuex-class vuex-module-decorators

L'article suivant est très facile à comprendre, alors veuillez le lire si vous êtes intéressé.

• Composant Vue commençant par TypeScript (vue-class-component)
• First vue-property-decorator (prend également en charge nuxt)

Modifier App.vue

src/App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
#app {
  width: 95%;
  margin: 0 auto;
}
</style>

Je veux laisser le composant d'affichage du côté du routeur, supprimez donc le lien du routeur et remplacez-le par la vue du routeur.

Supprimer les fichiers inutiles

├─ assets
│    └─ logo.ping        //Supprimer
├─ components
│     └─ HelloWorld.vue  //Supprimer
├─ views                 //Supprimer tout le répertoire
│      ├─ Home
│      └─ About

Veuillez laisser les fichiers que vous n'utiliserez plus à l'avenir.

Créer Test.vue

/pages/Test.vue

<template>
  <div class="test">
    <h1>Test Page</h1>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Test extends Vue {}
</script>

Créez un composant de test pour vérifier les éléments suivants:

1. Pouvez-vous acheminer correctement?
2. Le composant peut-il être chargé correctement?

Modifier le routeur

/router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Test from '../pages/Test.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Test',
    component: Test,
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

Définissez le routage de sorte que le composant Test créé soit appelé par la route.

Confirmation de la page

Si vous rechargez et que "Test Page" s'affiche, c'est OK! Vous pouvez augmenter librement le nombre de pages en connectant l'URL et le composant de cette manière!

5. Présentation de Vuetify

Installation de la bibliothèque

yarn add vuetify
yarn add --dev sass sass-loader fibers deepmerge

Si vous n'utilisez que vuetify, une erreur se produira, alors installez également les bibliothèques nécessaires.

Créer un fichier de plug-in

src/plugins/vuetify.ts

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Il s'agit d'un fichier de paramètres pour appliquer Vuetify à l'ensemble de l'application.

Modifier main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify' //ajouter à
import 'vuetify/dist/vuetify.min.css' //ajouter à

Vue.config.productionTip = false

new Vue({
  vuetify, //ajouter à
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

Vous pouvez utiliser Vuetify dans votre application en chargeant le plug-in créé ci-dessus.

Modifier App.vue

<template>
  <v-app>  <!--ajouter à-->
    <div id="app">
      <router-view />
    </div>
  </v-app> <!--ajouter à-->
</template>

Enfin, c'est OK si vous entourez la vue du corps principal de l'application.

Modifier Test.vue

<v-btn large color="primary">tester</v-btn>

Si le bouton est affiché, l'installation de Vuetify est terminée! Je vous remercie pour votre travail acharné! Après cela, vous pouvez augmenter librement le nombre de pages de cette manière!

6. Créez une application de compteur pour les tests

Maintenant que le modèle d'application est terminé, nous allons créer une fonction de compteur après avoir vérifié si Vuex / Store peut être utilisé correctement.

Créer Counter.vue

pages/Counter.vue

<template>
  <div class="counter">
    <h1>Counter</h1>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Counter extends Vue {}
</script>

Créer une page de compteur

--edit router / index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Test from '../pages/Test.vue'
import Counter from '../pages/Counter.vue' //ajouter à

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Test',
    component: Test,
  },
  { 
    path: '/counter',    //ajouter à
    name: 'Counter',     //ajouter à
    component: Counter,  //ajouter à
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

Définissez le routage de sorte que les composants ci-dessus soient rendus à "localhost: 8080 / counter".

Créer un module Store

store/modules/**counter.ts＊＊

import {
  getModule,
  Module,
  VuexModule,
  Mutation,
  Action,
} from 'vuex-module-decorators'
import store from '../index'

type CounterState = {
  count: number
}

@Module({ store, dynamic: true, namespaced: true, name: 'Test' })
class CounterModule extends VuexModule implements CounterState {
  count = 0

  @Mutation
  SET_COUNT(payload: number) {
    this.count = payload
  }

  @Action
  async increment() {
    this.SET_COUNT(this.count + 1)
  }

  @Action
  async decrement() {
    this.SET_COUNT(this.count - 1)
  }

  @Action
  async reset() {
    this.SET_COUNT(0)
  }
}

export const counterModule = getModule(CounterModule)

Vous pouvez décrire intuitivement le module Store avec les "vuex-module-decorators" introduits au début. Cette fois, nous utiliserons les données "count" pour vérifier si le nombre change dynamiquement lorsque Action est déclenchée.

Modifier tsconfig.json

tsconfig.json

"experimentalDecorators": true, //ajouter à

Si vous vous fâchez contre Linter, veuillez régler ceci.

Modifier Counter.vue

pages/Counter.vue

<template>
  <v-card>
    <v-container>
      <v-card-title>Counter</v-card-title>
      <v-divider />

      <v-container>
        <v-avatar v-for="item in count" :key="item" color="primary">
          <span class="white--text headline">{{ item }}</span>
        </v-avatar>
      </v-container>

      <v-divider />

      <v-card-actions>
        <v-btn @click="increment">+</v-btn> <!--Exécuter la méthode d'incrémentation lorsque vous cliquez dessus-->
        <v-btn @click="decrement">-</v-btn> <!--Exécuter la méthode de décrémentation lorsque vous cliquez dessus-->
        <v-btn text @click="reset">Reset</v-btn> <!--Exécuter la méthode de réinitialisation lorsque vous cliquez dessus-->
      </v-card-actions>
    </v-container>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { counterModule } from '../store/modules/counter'

@Component
export default class Counter extends Vue {
  get count() {
    return counterModule.count //Renvoie le décompte du magasin tel quel
  }

  /**
   *Ajouter un compte
   */
  increment() {
    counterModule.increment() //Déclenchez la méthode d'incrémentation du magasin
  }

  /**
   *Moins le compte
   */
  decrement() {
    counterModule.decrement() //Déclenchez la méthode de décrémentation du magasin
  }

  /**
   *Réinitialiser le décompte
   */
  reset() {
    counterModule.reset() //Déclenchez la méthode de réinitialisation du magasin
  }
}
</script>

<style lang="scss" scoped></style>

Profitons pleinement de Vuetify ici. Modifiez-le pour que v-avatar soit généré pour le nombre de comptes, puis déplacez-le!

Contrôle de fonctionnement!

Si vous appuyez sur [+] [-] pour augmenter ou diminuer le compteur, c'est OK! Je vous remercie pour votre travail acharné!

J'ai créé un compteur simple et vérifié le comportement de Vuex (Store), mais en insérant une communication API dans l'Action du Store, il est possible de se lier à la DB réelle. La prochaine fois, je créerai un conteneur pour le serveur API et la base de données qui fonctionne réellement!

la prochaine fois

Comment créer un environnement de [TypeScript + Vue + Express + MySQL] avec Docker ~ MySQL edition ~

référence

Comment créer un environnement de [TypeScript + Vue + Express + MySQL] avec Docker ~ Express ~ Comment créer un environnement de [TypeScript + Vue + Express + MySQL] avec Docker ~ Sequelize ~