- 
-
- {%- endif -%}
-
-
- {{ content }}
-
- 
+
+
+
+
+
+
](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-minimal)
diff --git a/assets/images/.gitignore b/assets/images/.gitignore
new file mode 100644
index 0000000..61ff636
--- /dev/null
+++ b/assets/images/.gitignore
@@ -0,0 +1 @@
+# sample file
\ No newline at end of file
diff --git a/ci/Dockerfile b/ci/Dockerfile
new file mode 100644
index 0000000..ba3727e
--- /dev/null
+++ b/ci/Dockerfile
@@ -0,0 +1,5 @@
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+COPY ./public .
+EXPOSE 80
+ENTRYPOINT ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/ci/ansible/inventory.ini b/ci/ansible/inventory.ini
new file mode 100644
index 0000000..6dbb7ff
--- /dev/null
+++ b/ci/ansible/inventory.ini
@@ -0,0 +1,5 @@
+[servers]
+tutoriel.dev
+
+[gha]
+localhost ansible_connection=local
\ No newline at end of file
diff --git a/ci/ansible/playbooks/deploy-output.yml b/ci/ansible/playbooks/deploy-output.yml
new file mode 100644
index 0000000..7d64fc6
--- /dev/null
+++ b/ci/ansible/playbooks/deploy-output.yml
@@ -0,0 +1,33 @@
+---
+- name: Copy output
+ become: false
+ hosts: servers
+ gather_facts: false
+ vars:
+ ansible_ssh_common_args: '-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null'
+ remote_folder: null # provided in param
+ current_directory: null # provided in param
+ tasks:
+ - name: Create folder
+ ansible.builtin.file:
+ path: '{{ remote_folder }}'
+ state: directory
+ mode: '0755'
+ - name: Upload
+ ansible.builtin.copy:
+ src: '{{ current_directory }}/output.tar.bz2'
+ dest: '{{ remote_folder }}/output.tar.bz2'
+ - name: Extract
+ ansible.builtin.unarchive:
+ src: '{{ remote_folder }}/output.tar.bz2'
+ dest: '{{ remote_folder }}/'
+ remote_src: yes
+ - name: Build and deploy
+ ansible.builtin.shell: |
+ set -x
+ cd {{ remote_folder }};
+ sudo microk8s kubectl apply -f k8s/
+ - name: Clean up
+ ansible.builtin.file:
+ path: '{{ remote_folder }}/*'
+ state: absent
diff --git a/ci/ansible/playbooks/save-artifact.yml b/ci/ansible/playbooks/save-artifact.yml
new file mode 100644
index 0000000..c990246
--- /dev/null
+++ b/ci/ansible/playbooks/save-artifact.yml
@@ -0,0 +1,33 @@
+---
+- name: Compress build artifacts
+ become: false
+ hosts: gha
+ gather_facts: false
+ vars:
+ current_directory: null # provided in param
+ tasks:
+ - name: Compress
+ community.general.archive:
+ path:
+ - '{{ current_directory }}/ci/*'
+ - '{{ current_directory }}/public/*'
+ dest: '{{ current_directory }}/artifact.tar.bz2'
+ format: bz2
+
+- name: Save artifact
+ become: false
+ hosts: servers
+ gather_facts: false
+ vars:
+ ansible_ssh_common_args: '-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null'
+ remote_folder: null # provided in param
+ tasks:
+ - name: Create remote folder
+ ansible.builtin.file:
+ path: '{{ remote_folder }}'
+ state: directory
+ mode: '0755'
+ - name: Upload artifact
+ ansible.builtin.copy:
+ src: '{{ current_directory }}/artifact.tar.bz2'
+ dest: '{{ remote_folder }}/artifact.tar.bz2'
diff --git a/ci/k8s/tutoriel-dev-deployment.yml b/ci/k8s/tutoriel-dev-deployment.yml
index d54a904..47fb630 100644
--- a/ci/k8s/tutoriel-dev-deployment.yml
+++ b/ci/k8s/tutoriel-dev-deployment.yml
@@ -1,28 +1,28 @@
apiVersion: apps/v1
kind: Deployment
metadata:
- name: tutoriel-dev-deployment
+ name: tutoriel-deployment-#{ENV}#
spec:
replicas: 1
minReadySeconds: 120
revisionHistoryLimit: 2
selector:
matchLabels:
- app: tutoriel-dev
- env: prod
+ app: tutoriel-#{ENV}#
+ env: #{ENV}#
template:
metadata:
labels:
- app: tutoriel-dev
- env: prod
+ app: tutoriel-#{ENV}#
+ env: #{ENV}#
spec:
containers:
- - name: tutoriel-dev
- image: lkpeto/tutoriel.dev:latest
- imagePullPolicy: Always
- resources:
- limits:
- memory: "128Mi"
- cpu: "500m"
- ports:
- - containerPort: 80
+ - name: tutoriel-#{ENV}#
+ image: lkpeto/tutoriel.dev:#{ENV}#
+ imagePullPolicy: Always
+ resources:
+ limits:
+ memory: '128Mi'
+ cpu: '500m'
+ ports:
+ - containerPort: 80
diff --git a/ci/k8s/tutoriel-dev-ingress.yml b/ci/k8s/tutoriel-dev-ingress.yml
index 8105378..5df0582 100644
--- a/ci/k8s/tutoriel-dev-ingress.yml
+++ b/ci/k8s/tutoriel-dev-ingress.yml
@@ -1,22 +1,22 @@
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
- name: tutoriel-dev-ingress
+ name: tutoriel-ingress-#{ENV}#
annotations:
cert-manager.io/cluster-issuer: lets-encrypt
spec:
tls:
- hosts:
- - tutoriel.dev
- secretName: tutoriel-dev-ingress-tls
+ - #{HOST}#
+ secretName: tutoriel-ingress-tls-#{ENV}#
rules:
- - host: tutoriel.dev
+ - host: #{HOST}#
http:
paths:
- path: /
pathType: Prefix
backend:
service:
- name: tutoriel-dev-service
+ name: tutoriel-service-#{ENV}#
port:
number: 80
diff --git a/ci/k8s/tutoriel-dev-service.yml b/ci/k8s/tutoriel-dev-service.yml
index b228b69..1de6024 100644
--- a/ci/k8s/tutoriel-dev-service.yml
+++ b/ci/k8s/tutoriel-dev-service.yml
@@ -1,15 +1,12 @@
apiVersion: v1
kind: Service
metadata:
- name: tutoriel-dev-service
+ name: tutoriel-service-#{ENV}#
spec:
selector:
- app: tutoriel-dev
- env: prod
+ app: tutoriel-#{ENV}#
+ env: #{ENV}#
ports:
- - name: http
- port: 80
- targetPort: 80
- - name: https
- port: 443
- targetPort: 443
+ - name: http
+ port: 80
+ targetPort: 80
diff --git a/ci/nginx/nginx.conf b/ci/nginx/nginx.conf
new file mode 100644
index 0000000..6c2d8a9
--- /dev/null
+++ b/ci/nginx/nginx.conf
@@ -0,0 +1,13 @@
+server {
+ listen 80;
+ server_name localhost;
+ root /var/www/localhost;
+ add_header X-Frame-Options "SAMEORIGIN";
+ location / {
+ try_files $uri $uri/ $uri/index.html /index.html =404;
+ }
+ error_page 404 /404.html;
+ location = /404.html {
+ internal;
+ }
+}
\ No newline at end of file
diff --git a/ci/parameters.yml.example b/ci/parameters.yml.example
deleted file mode 100644
index dc5e780..0000000
--- a/ci/parameters.yml.example
+++ /dev/null
@@ -1,9 +0,0 @@
-repo-branch: master
-
-registry-url: lkpeto/tutoriel.dev
-registry-username:
-registry-pass:
-registry-tag: latest
-
-kubectl-server: https://194.163.189.73:16443
-kubectl-token: # JWT token
\ No newline at end of file
diff --git a/ci/sh/build.sh b/ci/sh/build.sh
deleted file mode 100755
index ce3947d..0000000
--- a/ci/sh/build.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-
-source ci/sh/target.sh
-
-function start_dev_server {
- mkdir_target
- docker compose up --build -d --remove-orphans
-}
-
-function stop_dev_server {
- docker compose down
-}
diff --git a/ci/sh/target.sh b/ci/sh/target.sh
deleted file mode 100755
index df65b5f..0000000
--- a/ci/sh/target.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-
-function mkdir_target {
- if [ -d $TARGET_DIR ]; then
- rm -fr "$TARGET_DIR"
- fi
- mkdir $TARGET_DIR
-}
-
-function delete_target {
- rm -fr $TARGET_DIR
-}
diff --git a/ci/tutoriel-dev-pipeline.yml b/ci/tutoriel-dev-pipeline.yml
deleted file mode 100644
index b07a9c9..0000000
--- a/ci/tutoriel-dev-pipeline.yml
+++ /dev/null
@@ -1,106 +0,0 @@
-resource_types:
- - name: kubectl
- type: docker-image
- source:
- repository: kudohn/concourse-k8s-resource
- tag: 0.0.8
-
-resources:
-- name: tutoriel-repo
- type: git
- icon: github
- source:
- uri: https://github.com/trash07/tutoriel.dev.git
- branch: ((repo-branch))
-
-- name: jekyll-image
- type: registry-image
- icon: docker
- source:
- repository: jekyll/jekyll
- tag: 4
-
-- name: image-builder
- type: registry-image
- icon: docker
- source:
- repository: concourse/oci-build-task
-
-- name: tutoriel-dev-image
- type: registry-image
- icon: docker
- source:
- repository: ((registry-url))
- username: ((registry-username))
- password: ((registry-pass))
- tag: ((registry-tag))
-
-
-- name: kubernetes-server
- type: kubectl
- icon: server-network
- source:
- api_server_url: ((kubectl-server))
- client_token: ((kubectl-token))
- skip_tls_verify: true
-
-jobs:
-- name: build
- plan:
- - in_parallel:
- - get: jekyll-image
- - get: image-builder
- - get: tutoriel-repo
- trigger: true
-
- - task: build-static-site
- image: jekyll-image
- config:
- platform: linux
- inputs:
- - name: tutoriel-repo
- outputs:
- - name: build-result
- path: tutoriel-repo/site/_site
- run:
- path: sh
- args:
- - -cx
- - |
- set -x
- chmod -Rf 777 tutoriel-repo/site
- cd tutoriel-repo/site
- bundle install
- jekyll build
- cd ../../
-
- - task: build-docker-image
- image: image-builder
- privileged: true
- config:
- platform: linux
- inputs:
- - name: build-result
- - name: tutoriel-repo
- outputs:
- - name: image
- params:
- CONTEXT: ./build-result
- DOCKERFILE: tutoriel-repo/Dockerfile
- run:
- path: build
- - put: tutoriel-dev-image
- params:
- image: image/image.tar
-
-- name: deploy-website
- plan:
- - get: tutoriel-repo
- passed: [ build ]
- trigger: false
- - put: kubernetes-server
- params:
- status_check_timeout: 60
- command_timeout: 90
- paths:
- - tutoriel-repo/ci/k8s/
diff --git a/docker-compose.yml b/docker-compose.yml
deleted file mode 100644
index 52fd1ee..0000000
--- a/docker-compose.yml
+++ /dev/null
@@ -1,42 +0,0 @@
-version: '3'
-services:
- #############################################
- ###### LOCAL BUILD WITH LIVERELOAD #######
- #############################################
- build.dev:
- image: build.dev
- build:
- context: ./site
- dockerfile: Dockerfile
- container_name: build.dev
- volumes:
- - ${SITE_DIR}:/srv/jekyll/
- ports:
- - "4000:4000"
- #############################################
- ############ BUILD FOR PROD ##############
- #############################################
- build:
- image: jekyll/builder:4
- container_name: build
- #entrypoint: tail -f /dev/null
- command: >
- bash -c "
- set -x
- jekyll build
- cp -fr _site/* ${BUILD_TARGET}"
- volumes:
- - ${SITE_DIR}:/srv/jekyll
- - ${TARGET_DIR}:${BUILD_TARGET}
- #############################################
- ###### SERVE BUILD FOR PROD WITH NGINX ###
- #############################################
- serve:
- image: nginx:${NGINX_VERSION}
- container_name: serve
- volumes:
- - ${TARGET_DIR}:${NGINX_DOCUMENT_ROOT}
- ports:
- - "8080:80"
- depends_on:
- - build
diff --git a/gatsby-browser.js b/gatsby-browser.js
new file mode 100644
index 0000000..b08089a
--- /dev/null
+++ b/gatsby-browser.js
@@ -0,0 +1,7 @@
+// import "prismjs/themes/prism-tomorrow.css"
+// import "prismjs/themes/prism-twilight.css"
+
+// import "prism-themes/themes/prism-cb.css"
+// import "prism-themes/themes/prism-atom-dark.css"
+// import "prism-themes/themes/prism-material-dark.min.css"
+import 'prism-themes/themes/prism-z-touch.css';
diff --git a/gatsby-config.js b/gatsby-config.js
new file mode 100644
index 0000000..1bfc6b5
--- /dev/null
+++ b/gatsby-config.js
@@ -0,0 +1,44 @@
+/**
+ * @type {import('gatsby').GatsbyConfig}
+ */
+module.exports = {
+ siteMetadata: {
+ title: `tutoriel.dev`,
+ siteUrl: `https://tutoriel.dev`,
+ },
+ plugins: [
+ `gatsby-plugin-image`,
+ `gatsby-plugin-sharp`,
+ `gatsby-transformer-sharp`,
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `assets`,
+ path: `${__dirname}/assets`,
+ },
+ },
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `mdx`,
+ path: `${__dirname}/mdx`,
+ },
+ },
+ {
+ resolve: `gatsby-plugin-mdx`,
+ options: {
+ gatsbyRemarkPlugins: [
+ {
+ resolve: `gatsby-remark-prismjs`,
+ options: {
+ classPrefix: 'language-',
+ inlineCodeMarker: null,
+ showLineNumbers: false,
+ noInlineHighlight: false,
+ },
+ },
+ ],
+ },
+ },
+ ],
+};
diff --git a/site/_posts/2022-09-27-du-monolitique-aux-microservices.markdown b/mdx/2022-09-27-du-monolitique-aux-microservices.mdx
similarity index 58%
rename from site/_posts/2022-09-27-du-monolitique-aux-microservices.markdown
rename to mdx/2022-09-27-du-monolitique-aux-microservices.mdx
index e4ef774..3b43cb3 100644
--- a/site/_posts/2022-09-27-du-monolitique-aux-microservices.markdown
+++ b/mdx/2022-09-27-du-monolitique-aux-microservices.mdx
@@ -1,69 +1,72 @@
---
-layout: post
-title: "Du monolitique aux microservices"
-date: 2022-09-27
+title: 'Du monolitique aux microservices'
+slug: du-monolitique-aux-microservices
+date: 2022-09-27
+author: lkpeto
---
-Aujourd'hui, le conteneurs nous ont envahi. Dans toutes les applications -vous avez de fortes chances de le voir. Si vous êtes impliqué dans le processus de développement d'une application, vous + +Aujourd'hui, le conteneurs nous ont envahi. Dans toutes les applications +vous avez de fortes chances de le voir. Si vous êtes impliqué dans le processus de développement d'une application, vous avez des chances de travailler à ce qu'il trouve chemin vers de cloud. Comment sommes-nous arrivés là? -
## La situation initiale + Initialement, le mode de développement des applications était simple: -* Vous avez un serveur de production, -* Vous developpez votre application en local, -* Vous testez votre travail, -* Vous assistez aux revues de votre code, -* Vous generez un executable unique **(monolitique)**, -* Vous **arrêtez tout le monde** et vous déployez votre application sur le serveur. - -Ça marchait bien et tout le monde était content. Sauf que certaines applications + +- Vous avez un serveur de production, +- Vous developpez votre application en local, +- Vous testez votre travail, +- Vous assistez aux revues de votre code, +- Vous generez un executable unique **(monolitique)**, +- Vous **arrêtez tout le monde** et vous déployez votre application sur le serveur. + +Ça marchait bien et tout le monde était content. Sauf que certaines applications ont été victimes de leur propres succès. Je m'en vais vous donner un exemple: **Gmail**. Imaginez que vous êtes de developpeur de l'application Gmail. Elle a connu du succès. Aujourd'hui vous avez disons **100.000 utilisateurs**. Un succès n'est-ce pas ? Tout le monde vous félicite de gauche à droite mais il y a un petit soucis: **vous avez une -liste de nouvelles fonctionalités à ajouter**. Vous avez developpé en local les nouvelles mises +liste de nouvelles fonctionalités à ajouter**. Vous avez developpé en local les nouvelles mises à jours, la procédure est respectée mais vous êtes frustrés de déployer. -Pourquoi ? +Pourquoi ? Vous pensez à ce qui peut arriver après le déployement. Les raisons: -* Que se passera-t-il quand **vous allez arrêter l'application** pour faire déployement ? -* Que se passera-t-il quand **une partie de l'application sera touché par un bug** ? -* Que se passera-t-il quand **quand l'application aura besoin d'encore plus de ressources** ? +- Que se passera-t-il quand **vous allez arrêter l'application** pour faire déployement ? +- Que se passera-t-il quand **une partie de l'application sera touché par un bug** ? +- Que se passera-t-il quand **quand l'application aura besoin d'encore plus de ressources** ? De toutes les façons, ces quelques scénarios ne sont pas avantageuses pour votre business. -Si vous arrêtez l'application alors qu'un utilisateur est entrain de sévèrement l'utiliser, +Si vous arrêtez l'application alors qu'un utilisateur est entrain de sévèrement l'utiliser, vous risquez de perdre des clients. Lorsque vous changerez une ligne de code dans l'application, vous devez redéployer. Quand le serveur aura besoin de plus de resources, vous êtes encore dans -de nouveaux problèmes. +de nouveaux problèmes. ## Les inconvenient du monolitique + Comme vous l'avez vu, le monolitique pose les problèmes suivants: -* Les différents composants de l'application sont étroitement liées, -* Le moins de réutilisation, -* Le code devient plus complexe, -* L'application sera moins évolutive, -* L'application ne respecte pas le principe de la responsabilité unique, -* Des déployements fréquents et les redémarrages fréquents + +- Les différents composants de l'application sont étroitement liées, +- Le moins de réutilisation, +- Le code devient plus complexe, +- L'application sera moins évolutive, +- L'application ne respecte pas le principe de la responsabilité unique, +- Des déployements fréquents et les redémarrages fréquents ### Des composants étroitement liées -Les applications monolitiques ont souvant des composants étroitement liés **(Tight coupling)**. + +Les applications monolitiques ont souvant des composants étroitement liés **(Tight coupling)**. Cela voudrait dire que modifier une partie de l'application peut impacter plusieurs autres. -Dans ce cas, vous allez vous retrouver à répercuter et régler les problèmes causés par vos +Dans ce cas, vous allez vous retrouver à répercuter et régler les problèmes causés par vos modifications. ### Des composants moins réutilisable -Dans une plateforme monolitique, avec le temps, vous allez vous retrouver à dupliquer certains -composants en vue de répondre à certains besoins. - - - +Dans une plateforme monolitique, avec le temps, vous allez vous retrouver à dupliquer certains +composants en vue de répondre à certains besoins. diff --git a/site/_posts/2022-09-30-exposer-une-application-locale-sur-internet.markdown b/mdx/2022-09-30-exposer-une-application-locale-sur-internet.mdx similarity index 54% rename from site/_posts/2022-09-30-exposer-une-application-locale-sur-internet.markdown rename to mdx/2022-09-30-exposer-une-application-locale-sur-internet.mdx index 7ec8fbe..1918519 100644 --- a/site/_posts/2022-09-30-exposer-une-application-locale-sur-internet.markdown +++ b/mdx/2022-09-30-exposer-une-application-locale-sur-internet.mdx @@ -1,167 +1,173 @@ --- -layout: post -title: "Comment exposer une application locale sur internet ?" -date: 2022-09-30 +title: 'Comment exposer une application locale sur internet ?' +slug: comment-exposer-une-application-locale-sur-internet +date: 2022-09-30 +author: lkpeto --- -Des fois, en développant les applications, -vous vous retrouvez dans une situation où vous auriez voulu donner une adresse IP publique à votre + +Des fois, en développant les applications, +vous vous retrouvez dans une situation où vous auriez voulu donner une adresse IP publique à votre application locale. -
## Mise en situation + Vous avez une application qui s'exécute sur votre machine locale et vous voulez qu'un collègue qui est très loins de vous puisse avoir accès à votre machine locale depuis internet. Ou bien vous êtes entrain de développer une application en locale mais on vous demande une adresse -IP publique alors que vous ne l'avez pas encore. +IP publique alors que vous ne l'avez pas encore. Dans ces situations, comment procédez-vous ? C'est ce que nous allons voir dans cet article. ## Plan de travail + Dans cet article, nous allons procéder ainsi: -* Initialiser un petit projet express.js, -* Exécuter le projet express.js, -* Exposer le projet sur internet, -* Faire les tests. + +- Initialiser un petit projet express.js, +- Exécuter le projet express.js, +- Exposer le projet sur internet, +- Faire les tests. ### Initialiser un projet express.js -Avant d'initialiser le projet [express.js](https://expressjs.com/), vous avez besoin d'avoir -[Node.JS](https://nodejs.org/en/) installé. Pour vérifier que votre installation de Node.JS + +Avant d'initialiser le projet [express.js](https://expressjs.com/), vous avez besoin d'avoir +[Node.JS](https://nodejs.org/en/) installé. Pour vérifier que votre installation de Node.JS a réussi, tapez les commandes qui suivent dans votre terminal. Je vous laisse -{%- highlight bash -%} +```bash $ node -v && npm -v -{%- endhighlight -%} +``` -{%- highlight bash %} -v16.17.0 +```bash +v16.17.0 8.15.0 -{%- endhighlight -%} +``` La sortie montre que ma version de Node.Js est le **v16.17.0** et la version du **npm** est le **8.15.0**. Pour initialiser un projet d'exemple, nous allons créer un dossier nommé **exposition** et utiliser la commande **npm init**. -{%- highlight bash %} +```bash $ mkdir exposition $ cd exposition $ npm init -y -{%- endhighlight -%} +``` Dans la commande précédente, l'option **-y** permet d'accepter toutes les options par défaut. Enlevez-la si vous souhaitez répondre à toutes les questions vous même. Si tout se passe bien, vous aurez dans le dossier _exposition_ un fichier _package.json_ -{%- highlight json %} - { - "name": "exposition", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [], - "author": "", - "license": "ISC" - } -{%- endhighlight -%} - -Ensuite, on installe express, on crée le dossier **src** et on crée un fichier **index.js** - -{%- highlight bash %} -$ npm install express + +```json +{ + "name": "exposition", + "version": "1.0.0", + "description": "", + "main": "index.jsx", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC" +} +``` + +Ensuite, on installe express, on crée le dossier **src** et on crée un fichier **index.jsx** + +```bash +$ npm install express $ mkdir src $ cd src/ -$ touch index.js -{%- endhighlight -%} +$ touch index.jsx +``` -Dans le fichier **src/index.js** du dossier **exposition**, on va mettre le contenu suivant: +Dans le fichier **src/index.jsx** du dossier **exposition**, on va mettre le contenu suivant: -{%- highlight javascript %} +```javascript // intialiser express -const express = require('express') -const app = express() -const port = 3000 +const express = require('express'); +const app = express(); +const port = 3000; // au lancement de l'application retourner 'Hello, World' app.get('/', (req, res) => { - res.send('Hello World!') -}) + res.send('Hello World!'); +}); // lancer l'application sur le port 3000 app.listen(port, () => { - console.log(`Example app listening on port ${port}`) -}) -{%- endhighlight -%} + console.log(`Example app listening on port ${port}`); +}); +``` -Une dernière configuration avant de lancer l'application serait d'aller dans le fichier -**package.json** et de remplacer la ligne où il y a **"main": "index.js"** par -**"main": "src/index.js"** et d'ajouter dans le bloc **scripts** la ligne -**"start": "node src/index.js"**. Le fichier **package.json** final ressemblera à ce qui suit. +Une dernière configuration avant de lancer l'application serait d'aller dans le fichier +**package.json** et de remplacer la ligne où il y a **"main": "index.jsx"** par +**"main": "src/index.jsx"** et d'ajouter dans le bloc **scripts** la ligne +**"start": "node src/index.jsx"**. Le fichier **package.json** final ressemblera à ce qui suit. -{%- highlight json -%} +```json { - "name": "exposition", - "version": "1.0.0", - "description": "", - "main": "src/index.js", - "scripts": { - "start": "node src/index.js", - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [], - "author": "", - "license": "ISC", - "dependencies": { - "express": "^4.18.1" - } + "name": "exposition", + "version": "1.0.0", + "description": "", + "main": "src/index.jsx", + "scripts": { + "start": "node src/index.jsx", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "express": "^4.18.1" + } } -{%- endhighlight -%} +``` Maintenant, vous pouvez lancer l'application en tapant la commande **npm start** -{%- highlight bash -%} +```bash $ npm start > exposition@1.0.0 start -> node src/index.js +> node src/index.jsx Example app listening on port 3000 -{%- endhighlight -%} +``` Cette sortie montre que l'application s'exécute bien sur le port **3000** de notre machine locale. ### Exposer le projet sur internet -Nous voici maintenant au point important. Pour exposer le projet sur internet, vous avez + +Nous voici maintenant au point important. Pour exposer le projet sur internet, vous avez besoin d'un outils qui s'appelle [localtunnel](https://localtunnel.github.io/www/). Pour l'installer comme une application, tapez la commande qui suit: -{%- highlight bash -%} +```bash $ npm install -g localtunnel -{%- endhighlight -%} +``` -Une fois que l'installation a marché, vous êtes maintenant prêt à l'exposer au monde par +Une fois que l'installation a marché, vous êtes maintenant prêt à l'exposer au monde par internet. -Pour ce faire nous allons utiliser la commande **lt --port** et comme l'application est +Pour ce faire nous allons utiliser la commande **lt --port** et comme l'application est lancée sur le port **3000** on aura le résutat ci-dessous. -{%- highlight bash -%} +```bash lt --port 3000 your url is: https://two-dryers-shine-160-242-200-188.loca.lt -{%- endhighlight -%} +``` Le résultat montre que l'application est accessible sur internet sur le **https://two-dryers-shine-160-242-200-188.loca.lt** ## En résumé -Pour exposer une application locale en ligne, vous devez avoir ces prérequis: -* Avoir une application qui se lance en local sur un port donné _(Pour nous express.js sur le port 3000)_ -* Avoir Node.Js installé -* Installer **localtunel** -* Tapez la commande `lt --portDans ce tutoriel, nous allons voir comment installer + +Dans ce tutoriel, nous allons voir comment installer un serveur d'intégration continue Jenkins à partir de docker-compose -
## Prérequis + Pour bien suivre ce tutoriel, vous avez besoin d'avoir docker et docker-compose installés. Si vous ne les avez pas suivez les liens qui suivent pour: -* installer [docker](https://docs.docker.com/engine/install/) -* installer [docker-compose](https://docs.docker.com/compose/install/) + +- installer [docker](https://docs.docker.com/engine/install/) +- installer [docker-compose](https://docs.docker.com/compose/install/) Ce tutoriel suppose également que vous ayez une idée de ce que sont les concepts suivants: -* docker, -* docker-compose, -* jenkins, -* le fichier docker-compose.yml + +- docker, +- docker-compose, +- jenkins, +- le fichier docker-compose.yml ## Plan de travail + Voici comment nous allons procéder: -* Vérification des installations de docker et docker-compose -* Constitution du fichier docker-compose.yml -* Installation de l'application -## docker et docker-compose +- Vérification des installations de docker et docker-compose +- Constitution du fichier docker-compose.yml +- Installation de l'application + +## docker et docker-compose + Dans ce tutoriel nous allons utiliser des versions de docker et de docker-compose qui ne sont pas les plus récentes. -{%- highlight bash -%} +```bash $ sudo docker --version && sudo docker-compose --version Docker version 20.10.12, build 20.10.12-0ubuntu4 docker-compose version 1.29.2, build unknown -{%- endhighlight -%} +``` Si vous utilisez une version récente de docker qui embarque compose vous n'avez qu'à remplacer -{%- highlight bash -%} +```bash $ sudo docker-compose
- Nous sommes un groupe d'informaticiens qui vous apporte des tutoriels sur vos écrans.
-Notre but est de vous apporter des tutoriels en programmation, bases de données, administration systèmes
-{%- if post.description -%}{{ post.description | strip_html | strip_newlines | truncate: 120 }}{%- else -%}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{%- endif -%}
-| t |
Contact: hello@tutoriel.dev
-Twitter: @lkpeto
-Tutoriels en programmation, bases de données, administration systèmes
-Lorem ipsum thor smash liege-bastogne-liege landbouwkrediet ombregt krabbe, rouleur derby is for lovers bonk giro gilbert bidon. Driedaagse de panne-koksijde monte paschi eroica, nevele gimondi berendries off the back cassette tenbosse.
- -Bahamontes lanterne rouge normandie belgium. Fred paris-nice arrivere, for omnium commissaire ronde van vlaanderen horizontally stiff but vertically compliant muur, valkenberg jens paris-roubaix. Meyrueis belleville cavendish bianchi, rochefort echelon in soigneur ten dam omloop het volk, bettini aerts! Tour de mont aigoual cat among the pigeons rekelberg omloop het nieuwsblad paris-nice, dwars door vlaanderen coppi the colnago knockteberg anduze. - -Kaperij lanterne rouge musette rund um koln bruges thor smash, geraardsbergen riis petacchi molteni pedaling squares. Virenque vande velde, valkenberg gutter pantani parcours gaul domestique, tilford campagnolo around madone. Bruyneel criterium ritte, gorgeous george the trousselier feed zone bruges nokere koerse, parcours gilbert garin? Anquetil valkenberg bettini cat among the pigeons. - -Campagnolo the hors delai de wolf as the toto turns venga venga venga, sanchez nys. Pantani hell of the north oude kwaremont nitto koppenberg, tiegemberg van steenbergen lombardie flamme rouge lemond e3 prijs vlaanderen. - -Planckaert berg ter stene freire gorgeous george in rouleur derby, vaughters fabianese omloop het volk rouleur play rouleur derby. Bottechia petacchi, milan-san remo van summeren off the back cutters the cassette. - -Nyvelocity pyrenees vande velde merckx. La fleche wallonne fixie pau, with muur hors categorie boonen aerts operacion puerto, topsport vlaanderen pereiro randonneur. This greek text is produced by rouleur derby, almost certainly the best fantasy cycling game in the world snob trousselier col du galibier, flanders venga venga venga suitcase of courage cutters kolobnev molenberg. \ No newline at end of file diff --git a/site/example-posts/2014-12-11-image-in-post.markdown b/site/example-posts/2014-12-11-image-in-post.markdown deleted file mode 100755 index 61aed18..0000000 --- a/site/example-posts/2014-12-11-image-in-post.markdown +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: post -title: "Image in Post" -date: 2014-12-11 ---- - -Lorem ipsum thor smash liege-bastogne-liege landbouwkrediet ombregt krabbe, rouleur derby is for lovers bonk giro gilbert bidon. Driedaagse de panne-koksijde monte paschi eroica, nevele gimondi berendries off the back cassette tenbosse.
- -Bahamontes lanterne rouge normandie belgium. Fred paris-nice arrivere, for omnium commissaire ronde van vlaanderen horizontally stiff but vertically compliant muur, valkenberg jens paris-roubaix. Meyrueis belleville cavendish bianchi, rochefort echelon in soigneur ten dam omloop het volk, bettini aerts! Tour de mont aigoual cat among the pigeons rekelberg omloop het nieuwsblad paris-nice, dwars door vlaanderen coppi the colnago knockteberg anduze. - -
-
-Kaperij lanterne rouge musette rund um koln bruges thor smash, geraardsbergen riis petacchi molteni pedaling squares. Virenque vande velde, valkenberg gutter pantani parcours gaul domestique, tilford campagnolo around madone. Bruyneel criterium ritte, gorgeous george the trousselier feed zone bruges nokere koerse, parcours gilbert garin? Anquetil valkenberg bettini cat among the pigeons.
-
-Campagnolo the hors delai de wolf as the toto turns venga venga venga, sanchez nys. Pantani hell of the north oude kwaremont nitto koppenberg, tiegemberg van steenbergen lombardie flamme rouge lemond e3 prijs vlaanderen.
-
-Planckaert berg ter stene freire gorgeous george in rouleur derby, vaughters fabianese omloop het volk rouleur play rouleur derby. Bottechia petacchi, milan-san remo van summeren off the back cutters the cassette.
-
-Nyvelocity pyrenees vande velde merckx. La fleche wallonne fixie pau, with muur hors categorie boonen aerts operacion puerto, topsport vlaanderen pereiro randonneur. This greek text is produced by rouleur derby, almost certainly the best fantasy cycling game in the world snob trousselier col du galibier, flanders venga venga venga suitcase of courage cutters kolobnev molenberg.
diff --git a/site/example-posts/2014-12-12-figure-with-caption.markdown b/site/example-posts/2014-12-12-figure-with-caption.markdown
deleted file mode 100755
index a1cee94..0000000
--- a/site/example-posts/2014-12-12-figure-with-caption.markdown
+++ /dev/null
@@ -1,30 +0,0 @@
----
-layout: post
-title: "Figure With A Caption"
-date: 2014-12-12
----
-
-
-Lorem ipsum thor smash liege-bastogne-liege landbouwkrediet ombregt krabbe, rouleur derby is for lovers bonk giro gilbert bidon. Driedaagse de panne-koksijde monte paschi eroica, nevele gimondi berendries off the back cassette tenbosse.
- -Bahamontes lanterne rouge normandie belgium. Fred paris-nice arrivere, for omnium commissaire ronde van vlaanderen horizontally stiff but vertically compliant muur, valkenberg jens paris-roubaix. Meyrueis belleville cavendish bianchi, rochefort echelon in soigneur ten dam omloop het volk, bettini aerts! Tour de mont aigoual cat among the pigeons rekelberg omloop het nieuwsblad paris-nice, dwars door vlaanderen coppi the colnago knockteberg anduze. - -
-
- You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes! To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.
- -Jekyll also offers powerful support for code snippets: - -{%- highlight ruby -%} -def print_hi(name) - puts "Hi, #{name}" -end -print_hi('Tom') -#=> prints 'Hi, Tom' to STDOUT. -{%- endhighlight -%} - -{%- highlight java -%} - import java.util.*; - class Personne { - private Integer id; - - public Integer getId() { - return this.id; - } - } -{%- endhighlight -%} - -Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh]. - -[jekyll-gh]: https://github.com/mojombo/jekyll -[jekyll]: http://jekyllrb.com diff --git a/site/example-posts/2014-12-14-featured-image.markdown b/site/example-posts/2014-12-14-featured-image.markdown deleted file mode 100755 index 0cea4b4..0000000 --- a/site/example-posts/2014-12-14-featured-image.markdown +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: post -title: "Featured Image" -date: 2014-12-14 -image: touring.jpg ---- - -Lorem ipsum thor smash liege-bastogne-liege landbouwkrediet ombregt krabbe, rouleur derby is for lovers bonk giro gilbert bidon. Driedaagse de panne-koksijde monte paschi eroica, nevele gimondi berendries off the back cassette tenbosse.
- -Bahamontes lanterne rouge normandie belgium. Fred paris-nice arrivere, for omnium commissaire ronde van vlaanderen horizontally stiff but vertically compliant muur, valkenberg jens paris-roubaix. Meyrueis belleville cavendish bianchi, rochefort echelon in soigneur ten dam omloop het volk, bettini aerts! Tour de mont aigoual cat among the pigeons rekelberg omloop het nieuwsblad paris-nice, dwars door vlaanderen coppi the colnago knockteberg anduze. - -Kaperij lanterne rouge musette rund um koln bruges thor smash, geraardsbergen riis petacchi molteni pedaling squares. Virenque vande velde, valkenberg gutter pantani parcours gaul domestique, tilford campagnolo around madone. Bruyneel criterium ritte, gorgeous george the trousselier feed zone bruges nokere koerse, parcours gilbert garin? Anquetil valkenberg bettini cat among the pigeons. - -Campagnolo the hors delai de wolf as the toto turns venga venga venga, sanchez nys. Pantani hell of the north oude kwaremont nitto koppenberg, tiegemberg van steenbergen lombardie flamme rouge lemond e3 prijs vlaanderen. - -Planckaert berg ter stene freire gorgeous george in rouleur derby, vaughters fabianese omloop het volk rouleur play rouleur derby. Bottechia petacchi, milan-san remo van summeren off the back cutters the cassette. - -Nyvelocity pyrenees vande velde merckx. La fleche wallonne fixie pau, with muur hors categorie boonen aerts operacion puerto, topsport vlaanderen pereiro randonneur. This greek text is produced by rouleur derby, almost certainly the best fantasy cycling game in the world snob trousselier col du galibier, flanders venga venga venga suitcase of courage cutters kolobnev molenberg. diff --git a/site/example-posts/2014-12-15-example-post-formatting.markdown b/site/example-posts/2014-12-15-example-post-formatting.markdown deleted file mode 100755 index 1e356f5..0000000 --- a/site/example-posts/2014-12-15-example-post-formatting.markdown +++ /dev/null @@ -1,65 +0,0 @@ ---- -layout: post -title: "Example Post Formatting" -date: 2014-12-15 -description: This is a post description for meta purposes. This is also the excerpt of the article that shows up on the index/home page. Change this in the post YAML. ---- - -Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
- -# Heading 1 - -## Heading 2 - -### Heading 3 - -#### Heading 4 - -##### Heading 5 - -###### Heading 6 - -Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.- -Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. - -## Unordered List -* List Item -* Longer List Item - * Nested List Item - * Nested Item -* List Item - -## Ordered List -1. List Item -2. Longer List Item - 1. Nested OL Item - 2. Another Nested Item -3. List Item - -## Definition List -
{%- if post.description -%}{{ post.description }}{%- else -%}{{ post.excerpt | strip_html }}{%- endif -%}
-