Retour

Démarrer avec Docker, Symfony et Vue.js


Dans cet article nous allons vous montrer comment mettre en place une application web avec symfony et Vue.js dans un environnement docker. À la fin de cet article vous aurez un projet prêt au développement. Vous pouvez également retrouver le projet sur le github d’Eleven-labs sur ce dépôt eleven-labs/docker-symfony-vue

ENVIRONNEMENT : Docker

Pour l'environnement nous allons nous baser sur le projet de Maxence POUTORD disponible sur son GitHub auquel nous allons apporter quelques modifications. Dans un premier temps nous changeons de base de données pour passer sur PostgreSQL. Pour ce faire nous modifions le fichier docker-compose.yml se trouvant à la racine de notre projet :

# ... postgres: image: postgres:9.6 ports: - ${POSTGRES_PORT}:5432 environment: POSTGRES_DB: ${POSTGRES_DB} POSTGRES_USER: ${POSTGRES_USER} POSTGRES_PASSWORD: ${POSTGRES_PASSWORD} php: build: docker/php7-fpm env_file: ./.env volumes: - ${SYMFONY_APP_PATH}:/var/www/symfony links: - postgres # ...

Ensuite nous ajoutons à notre stack Node JS pour Vue.js ainsi que Redis pour la gestion des sessions. Toujours dans le fichier docker-compose.yml :

# … redis: image: redis:3.2.10 node: build: docker/node volumes: - ${SYMFONY_APP_PATH}:/var/www/symfony command: bash -c "yarn && yarn dev"

Puis nous créons le Dockerfile pour Node JS dans le répertoire docker/node :

FROM node:8 RUN apt-get update && \ apt-get install -y \ curl \ apt-transport-https RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list RUN apt-get update && apt-get install yarn WORKDIR /var/www/symfony

Enfin nous modifions le Dockerfile de PHP qui se trouve dans le répertoire docker/php7-fpm pour installer la librairie cliente de PostgreSQL libpq-dev ainsi que l’extension pdo_pgsql pour PHP :

# ... RUN apt-get update && \ apt-get install -y \ git \ unzip \ libpq-dev # RUN docker-php-ext-install pdo pdo_pgsql # ...

Dans le même fichier, nous en profitons aussi pour supprimer l’alias de la commande pour Symfony 2 RUN echo 'alias sf="php app/console"' >> ~/.bashrc

Et nous mettons à jour nos variables du fichier .env.dist se trouvant à la racine du projet :

# PATH DIR SYMFONY_APP_PATH=./ LOGS_DIR=./docker/logs # DATABASE POSTGRES_DB= POSTGRES_USER= POSTGRES_PASSWORD= POSTGRES_PORT= # PORT WEB WEB_PORT= ELK_PORT= # SYMFONY SECRET= #SMTP SMTP_USER= SMTP_PASSWORD= SMTP_HOST= SMTP_TRANSPORT= #REDIS REDIS_DNS=

BACKEND : Symfony

Maintenant que notre environnement est prêt, nous installons Symfony, je vous invite à suivre le tutoriel officiel sur le site de symfony. Nous allons personnaliser Symfony pour notre projet et pour ce faire nous supprimons l'appel à trois scripts exécutés lors du composer install ou du composer update, qui se trouvent dans le fichier composer.json à la racine du projet, et qui sont :

  • installRequirementsFile
  • prepareDeploymentTarget,
  • buildParameters.

Ce qui nous donne :

// … { "deploy-scripts": [ "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap", "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache", "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets" ], "symfony-scripts": [ "@deploy-scripts" ], "post-install-cmd": ["@symfony-scripts"], "post-update-cmd": ["@symfony-scripts"] }, // ...

Nous pouvons donc supprimer les lignes de contrôle d’accès du fichier app_dev.php qui se trouvent dans web/ (ATTENTION: ce fichier ne devra plus se trouver dans un environnement de production) :

<?php // ... if (isset($_SERVER['HTTP_CLIENT_IP']) || isset($_SERVER['HTTP_X_FORWARDED_FOR']) || !(in_array(@$_SERVER['REMOTE_ADDR'], ['127.0.0.1', '::1']) || PHP_SAPI === 'cli-server') ) { header('HTTP/1.0 403 Forbidden'); exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.'); } // ...

Nous pouvons supprimer les fichiers web/config.php et app/config/parameters.yml.dist, et éditer le fichier app/config/parameters.yml comme ceci :

parameters: # Database parameters database_host: postgres database_port: '%env(POSTGRES_PORT)%' database_name: '%env(POSTGRES_DB)%' database_user: '%env(POSTGRES_USER)%' database_password: '%env(POSTGRES_PASSWORD)%' # Mailer parameters mailer_transport: '%env(SMTP_TRANSPORT)%' mailer_host: '%env(SMTP_HOST)%' mailer_user: '%env(SMTP_USER)%' mailer_password: '%env(SMTP_PASSWORD)%' # Secret secret: '%env(SECRET)%' # Redis parameters redis_dsn: '%env(REDIS_DNS)%' redis_options: ~ session_ttl: 86400

Notre projet est installé et personnalisé, il ne reste plus qu'à installer quelques bundles :

  • friendsofsymfony/rest-bundle, pour la mise en place rapide d’une API REST
  • jms/serializer-bundle, pour faciliter la sérialisation et désérialisation des données
  • predis/predis et snc/redis-bundle, pour la communication avec redis et la gestion des sessions
  • (optionnel) doctrine/doctrine-fixtures-bundle, pour générer des données

Avec cette commande, nous les installons docker-compose exec -T --user www-data php composer require friendsofsymfony/rest-bundle jms/serializer-bundle predis/predis snc/redis-bundle doctrine/doctrine-fixtures-bundle

Nous les référençons dans app/AppKernel.php :

<?php // ... class AppKernel extends Kernel { public function registerBundles() { $bundles = [ // ... new FOS\RestBundle\FOSRestBundle(), new JMS\SerializerBundle\JMSSerializerBundle(), new Snc\RedisBundle\SncRedisBundle(), new AppBundle\AppBundle(), ]; if (in_array($this->getEnvironment(), ['dev', 'test'], true)) { // ... $bundles[] = new Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle(); // .. } // ... }

Et nous les configurons :

# SerializerBundle Configuration jms_serializer: metadata: auto_detection: true # FOSRestBundle Configuration fos_rest: body_converter: enabled: true validate: true serializer: serialize_null: true param_fetcher_listener: true routing_loader: default_format: json include_format: false view: view_response_listener: true format_listener: rules: - { path: '^/api', priorities: ['json'], fallback_format: 'json' } - { path: '^/', stop: true } # RedisBundle Configuration snc_redis: clients: session_client: type: predis logging: false alias: session_client dsn: %redis_dsn% options: %redis_options% session: client: session_client prefix: app_session_ ttl: '%session_ttl%'

Voilà qui est fait pour la partie docker et symfony. Nous allons maintenant passer à la partie Vue.js

FRONTEND : Vue.js

Si vous n’êtes pas familier avec Vue.js, vous pouvez visiter la page officielle du framework. Vous trouverez des tutoriels très bien faits et traduits en français.

Tout d’abord, initialisons notre gestionnaire de package :

symfony-vue $ yarn init yarn init v1.3.2 question name (symfony-vue): question version (1.0.0): question description: symfony <3 vue question entry point (index.js): question repository url: question author: Wilson question license (MIT): question private: success Saved package.json ✨ Done in 49.10s. symfony-vue $

Pour nous permettre d’utiliser ES6 tout en restant compatible, nous utilisons babel :

/* .babelrc */ { "presets": [ [ "env", { "targets": { "browsers": [ "last 2 versions", "Chrome >= 52", "FireFox >= 44", "Safari >= 7", "ie >= 10", "last 4 Edge versions", ], }, }, ], "stage-2", "vue", ], }

Et pour gérer nos différents bundles nous utilisons Webpack. Voici notre configuration :

/* app/config/webpack.config.js */ const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const webpack = require('webpack'); const autoprefixer = require('autoprefixer'); module.exports = { entry: { page1: './src/AppBundle/Resources/js/page1/entrypoint.js', page2: './src/AppBundle/Resources/js/page2/entrypoint.js', }, output: { path: path.resolve(__dirname, '../../src/AppBundle/Resources/public'), filename: 'js/[name].js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { scss: 'style!css!sass', }, }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, }, { test: /\.s[a|c]ss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', 'postcss-loader', { loader: 'postcss-loader', options: { plugins: [ autoprefixer({ remove: false, browsers: [ 'last 2 versions', 'Chrome >= 52', 'FireFox >= 44', 'Safari >= 7', 'ie >= 10', 'last 4 Edge versions', ], }), ], }, }, 'sass-loader', ], }), }, { test: /\.(jpg|png|svg)$/, loader: 'file-loader', }, ], }, plugins: [ new ExtractTextPlugin({ filename: 'css/style.css', }), new webpack.LoaderOptionsPlugin({ options: { sassLoader: { includePaths: [path.resolve(__dirname, '../node_modules')] } }, }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: `'${process.env.NODE_ENV}'`, }, }), ], };

Nous avons aussi configuré Webpack pour utiliser SASS.

Nous pouvons ajouter les scripts suivants à notre package.json pour lancer et builder notre application :

/* package.json */ // ... "dev": "NODE_ENV=dev webpack --config ./app/config/webpack.conf.js --devtool source-map --debug --watch --display-error-details", "build": "NODE_ENV=production webpack --config ./app/config/webpack.conf.js --progress --colors --optimize-minimize", // ...

Comme vous pouvez le voir, nous avons deux entrypoints différents dans notre configuration Webpack. De ces deux entrypoints, Webpack va générer deux bundles. De cette façon, nous allons pouvoir intégrer des applications Vue.js à différentes pages Twig.

Pour cet exemple, nous allons créer un composant “message” que nous allons appeler dans deux pages différentes. Créons d’abord notre composant, qui prend en propriété “text” :

/* src/AppBundle/Resources/js/components/message/index.vue */ <template> <div class="message"> {{ text }} </div> </template> <script> export default { name: 'message', props: { text: { type: String, required: true } } } </script> <style lang="scss" scoped> </style>

Appelons-le dans notre page 1 :

/* src/AppBundle/Resources/js/page1/index.vue */ <template> <Message text="Hello page 1" /> </template> <script> import Message from '../components/message/index.vue'; export default { name: 'Page1Container', data() { return { }; }, components: { Message, }, }; </script>

Il faut ensuite créer notre application Vue.js :

/* src/AppBundle/Resources/js/page1/entrypoint.js */ import Vue from 'vue'; import Page1 from './index.vue'; export const vm = new Vue({ el: '#app1', components: { app: Page1, }, render: h => h('app'), });

Puis nous appelons notre application dans la page Twig :

/* src/AppBundle/Resources/views/App/index.html.twig */ {% extends '@App/App/layout.html.twig' %} {% block container %} <div id="app1"></div> <script type="text/javascript" src="{{ asset('bundles/app/js/page1.js') }}"></script> {% endblock %}

Nous faisons de même pour la page 2 :

/* src/AppBundle/Resources/js/page2/index.vue */ <template> <Message text="Hello page 2" /> </template> <script> import Message from '../components/message/index.vue'; export default { name: 'Page2Container', data() { return { }; }, components: { Message, }, }; </script>
/* src/AppBundle/Resources/js/page2/entrypoint.js */ import Vue from 'vue'; import Page2 from './index.vue'; export const vm = new Vue({ el: '#app2', components: { app: Page2, }, render: h => h('app'), });
/* src/AppBundle/Resources/views/App/page2.html.twig */ {% extends '@App/App/layout.html.twig' %} {% block container %} <div id="app2"></div> <script type="text/javascript" src="{{ asset('bundles/app/js/page2.js') }}"></script> {% endblock %}

COMMUNICATION

Parfois nous avons besoin d’envoyer des informations de Symfony vers Vue.js. Selon la taille de l’information et sa sensibilité, nous pouvons passer par une requête API, ou par un Data Layout.

Commençons par le Data Layout. Le Data Layout est un objet déclaré globalement, qui sera donc accessible par notre template Twig, et notre application Vue.js.

Nous allons d’abord définir un objet dataLayout au niveau le plus haut de nos templates Twig :

/* app/Resources/views/app.html.twig */ <!DOCTYPE html> <html lang="{{ app.request.locale }}"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8" /> <title>{% block title %}{% endblock %}</title> {% block stylesheets %}{% endblock %} <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> </head> <body> {% block data_layout %} <script type="text/javascript" id="dataLayout"> var dataLayout = {}; </script> {% endblock %} {% block body %}{% endblock %} {% block javascripts %}{% endblock %} </body> </html>

Veillez à bien respecter l’ordre d’appel des scripts : en premier le dataLayout et ensuite l’application Vue.js. Sinon vous n’aurez pas accès à l’objet global dataLayout, car il ne sera pas encore créé. Ensuite nous allons envoyer des données depuis Symfony, et les récupérer dans notre Twig :

/* src/AppBundle/Controller/appController.php */ // ... public function indexAction(): Response { return $this->render('@App/App/index.html.twig', [ 'message'=>'hello !' ]); } // ...
/* src/AppBundle/Resources/views/App/index.html.twig */ // ... {% block data_layout %} {{ parent() }} <script type="text/javascript"> dataLayout.message = "{{ message }}"; </script> {% endblock %} // ...

Il faut maintenant récupérer le message depuis Vue.js. Modifions notre index.vue de la page 1 :

/* src/AppBundle/Resources/js/page1/index.vue */ <template> <Message :text="message" /> </template> // ... data() { return { message: '', }; // ... mounted() { this.$set(this, 'message', dataLayout.message); }, }; </script>

Plus classiquement, nous pouvons récupérer les informations depuis un appel API. Créons une route “/hello/:astronaut” :

/* src/AppBundle/Controller/apiController.php */ /** * Class ApiController * @package AppBundle\Controller */ class ApiController extends FOSRestController { /** * @Rest\View() * @Rest\Get("hello/{astronaut}", defaults={"astronaut" = null}) * * @param string $astronaut * * @return string */ public function getHelloAction(string $astronaut = null) { return isset($astronaut) ? "Hello $astronaut" : "Hello Astronaut"; } }

Et modifions notre page2/index.vue :

/* page2/index.vue */ <template> <Message :text="message" /> </template> // ... data() { return { message: '', }; // ... mounted() { fetch('/api/hello/wilson') .then(response => response.json) .then(({ message }) => this.$set(this, 'message', message)) }, }; </script>

Et voilà, vous pouvez maintenant faire communiquer votre application Symfony avec Vue.js

EXTRA : UN SCRIPT POUR SE SIMPLIFIER LA VIE

Voici un petit extra pour se simplifier la vie. Comme vous avez pu le voir, pour l’installation de bundle, nous devions écrire une commande assez longue donc pour ne pas la réécrire entièrement, je vous propose de créer un script dédié à notre projet. Nous définissons dans un premier temps la fonction d'entrée et la fonction d’information sur l'usage comme ceci :

#!/bin/bash # ... usage () { echo "usage: bin/docker COMMAND [ARGUMENTS] init Initialize the project start Start project stop Stop project bash Use bash inside the app container exec Executes a command inside the app container destroy Remove all the project Docker containers with their volumes console Use the Symfony console composer Use Composer inside the app container test Run test project inside the app container " } main () { declare CMD=$1 if [ -z $1 ]; then usage exit 0 fi if [[ ! $1 =~ ^init|start|stop|bash|destroy|console|composer|exec|tests$ ]]; then echo "$1 is not a supported command" exit 1 fi $@ } main $@

Ensuite nous implémentons nos fonctions. Je vais prendre uniquement l’exemple de composer, mais vous pouvez retrouver l'intégralité du script ici.

#!/bin/bash # … # run Composer inside the app container composer () { declare ARGS=$@ docker-compose exec -T --user www-data php composer $ARGS } # …

Et voilà le tour est joué ! Maintenant au lieu d’écrire docker-compose exec -T --user www-data php compose [repository/bundleName], nous écrirons bin/app compose [repository/bundleName]

EN CONCLUSION

Vous disposez d’un projet configuré pour utiliser la puissance de Symfony et la simplicité de Vue.js. N’hésitez pas à nous poser des questions ou à nous laisser un commentaire !


Articles sur le même thème

Découvrez Eleven Labs

L'ESN qui fait décoller vos projets web, mobile & data !

Voir le site web

Contact

Eleven Labs - Paris

102, rue du Faubourg Saint Honoré

75008 Paris

Eleven Labs - Nantes

40, rue la Tour d'Auvergne

44200 Nantes

Eleven Labs - Montréal

1155, Metcalfe St Suite 1500

Montréal, QC H3B 2V6, Canada