Docker + webhook Automation Deployment Front End Project

Préface

À l'heure actuelle, tous les déploiements de projets au sein de l'entreprise sont basés surdockerConteneur,Dans la pratique, il suffit decopy DockerfileDocumentation,Puis il y a le déploiement automatisé de l'entreprise,Projet publié surOKC'est.

Mais pour nos propres projets privés,Comment utiliserdockerEt la publication automatisée？ Utilisé dans cet articledocker-webhook Construction automatiséevueProjets,Développer les idées,J'espère pouvoir communiquer ensemble.

Réalisation concrète：

• Utiliservue-cliCréationvueProjets
• Construction localevueMiroir du projet,pushÀdockerEntrepôt de gestion miroir（hub.docker.com）,Déclencheurdocker-webhook
• nodeSurveillance du servicedocker-webhook,Démarrage localvue-demoConteneur,Déploiement réussi

Versions connexes：

• Docker version 20.10.10, build b485636 dockerInstaller la documentation officielle
• @vue/cli 4.5.15
• macOS Monterey Verison 12.0.1

CréationvueApplication

# Création
npx @vue/cli create vue-demo
Copier le Code

Création de la racine du projetDockerfileDocumentation

# Dockerfile

# Basé surnodeMiroir
FROM node:lts-alpine AS builder  

# Création de miroirssrcTable des matières
WORKDIR /src
# Projetpackage.jsonCopie du fichier àsrcTable des matières
COPY package*.json /src
RUN npm install
COPY . /src
RUN npm run build

# Il en faut un autre.nginxMiroir,Pour déployervueProjets
FROM nginx:stable-alpine
COPY --from=builder /src/dist /usr/share/nginx/html/
Copier le Code

Création de la racine du projet.dockerignoreDocumentation

node_modules
Copier le Code

La structure actuelle du Répertoire est la suivante

Construction localevue-demoMiroir,Et démarrevue-demoProjets

docker build -t vue-demo . 
Copier le Code

docker build Pour construire un miroir
-t C'est le nom du miroir Ce nom peut être utilisé à volonté
. Est basé sur le répertoire actuelDockerfilePour construire un miroir

Après l'exécution,Exécution du terminaldocker images, On peut voir qu'il y a déjà un vue-demo Miroir

docker run -d -p 8080:80 --name vue-demo-container vue-demo  
Copier le Code

docker run Conteneur de démarrage
-d En coulisses
-p 8080:80 Pour déplacer l'hôte 8080 Port mapped to 80 Port (nginxDémarrage par défaut80Port)
--name Nom du conteneur

docker ps Les commandes peuvent voir le conteneur vue-demo-container Déjà commencé,Et ouvrehttp://localhost:8080/ Je vois.vue Le projet a été lancé

Pousser le miroir construit à docker Miroir de l'entrepôt de gestion

L'URL est hub.docker.com/

Le compte doit être créé lui - même

Connexion locale à l'entrepôt miroir

docker login -u username
Password 
Copier le Code

Push

docker tag vue-demo houhoz/vue-demo
docker push houhoz/vue-demo
Copier le Code

docker tag : Marquer le miroir local,Placer dans un entrepôt,houhoz C'est moi. hub.docker Nom d'utilisateur pour

Poussée réussie,Ouvre.hub.docker.com/, Vous pouvez voir le miroir que vous venez de créer

Créationdocker-webhook

Pour réaliserdocker Miroir poussé avec succès , Reconstruire le projet , Nous devons en créer un autre nodeServices,Pour écouterwebhookÉvénement déclencheur pour

Créer un nouveaunode-webhookProjets

npm init -y
touch index.js
Copier le Code

# index.js
const http = require('http')
const { execSync } = require('child_process')

const resolvePost = req =>
  new Promise(resolve => {
    let chunk = ''
    req.on('data', data => {
      chunk += data
    })
    req.on('end', () => {
      resolve(JSON.parse(chunk))
    })
  })

http
  .createServer(async (req, res) => {
    console.log('receive request')
    console.log(req.url)
    if (req.method === 'POST' && req.url === '/') {
      const data = await resolvePost(req)
      // À propos dewebhook Vous pouvez consulter les documents officiels  https://docs.docker.com/docker-hub/webhooks/
      // Tirez! docker Miroir
      execSync(
        `docker pull ${data.repository?.repo_name}:${data?.push_data?.tag}`,
        {
          stdio: 'inherit',
        }
      )

      // Destruction docker Conteneur
      execSync(
        `docker ps -a -f "name=^${data.repository.name}-container" --format="{{.Names}}" | xargs -r docker stop | xargs -r docker rm`,
        {
          stdio: 'inherit',
        }
      )

      // Création docker Conteneur
      execSync(
        `docker run -d -p 8080:80 --name ${data.repository.name}-container ${data.repository.repo_name}:${data?.push_data?.tag}`,
        {
          stdio: 'inherit',
        }
      )
      console.log('deploy success')
    }
    res.end('ok')
  })
  .listen(3000, () => {
    console.log('server:3000 is ready')
  })
Copier le Code

Démarrage localnode Projets node index.js

Parce quedocker-webhook Et l'accès au réseau public ,Doit être utiliséngrok Pénétration de l'Intranet

./ngrok http 3000

Et copier0280-129-227-137-235.ngrok.io Ajouter

Après, on va tester Local docker push houhoz/vue-demo, Après ça, on verra, Afficher le déploiement réussi .

Et j'ai vudocker-webhooks C'est aussi un succès

Ouvrir localhttp://localhost:8080/