Show off your Dockerized Vue.js Application
Introduction
So you built your first Vue.js app and now you really want to show it off to your colleagues? and you also want to demonstrate that you can also run it in a Dockerized? This place maybe is the best place to start!
Dockerize your app
Let’s start by creating Dockerfile in the root of your project:
Now let’s build the Docker image of our Vue.js app:
docker build -t show-off-your-dockerized-vue .
Finally, let’s run our Vue.js app in a Docker container:
docker run -it -p 8080:8080 --rm show-off-your-dockerized-vue
Access http://localhost:8080 with your browser
Adding Docker Compose
You’re done! haven’t you? why not add a new spell for your dockerized app? here comes docker-compose-ing your app!
Let’s build and deploy your app using this command docker-compose up.
Access http://127.0.0.1:8080 and you have already dockerized your VueJs application. Well done!
Deployment
Okay, you nail it! You have packed your app as a container. So it’s the time to really show it to the World!
In this tutorial, we will use Heroku as our Platform as a Service, GitLab as our repository manager, and we will use GitLab CI too, to get our apps shipped online automatically!
Repository Configuration
In this tutorial, I assume you have configured your GitLab and Heroku (by providing HEROKU_APP_NAME, and HEROKU_API_KEY in GitLab CI/CD variables. If you haven’t feel free to check this tutorial: https://medium.com/swlh/how-do-i-deploy-my-code-to-heroku-using-gitlab-ci-cd-6a232b6be2e4.
Yup, You are ready to go now! but no! Wait why? what did we miss?
Your Docker configuration is the best fit for the development environment, when we want to deploy it to the production-ready environment (staging or production) we have to create one Dockerfile and docker-compose.yml for that environment. So we will create Dockerfile-prod and docker-compose-prod.yml!
Setting Production-Ready Docker Environment
don’t worry, I will give you the example of Dockerfile-prod and docker-compose-prod.yml example.
Your new Dockerfile-prod file
This is your new docker-compose-prod.yml
Note that we use Nginx for this the production-ready docker environment, but why? we can serve Vue with the development setting of docker right? yes, you’re right, but that’s bad practice. It’s a best practice to use the built or compiled Vue serves it over HTTP in this case I’m using Nginx, there are many ways to deploy it correctly, you can see here: https://cli.vuejs.org/guide/deployment.html
We have done separating the docker environments, for one development and one for a production-ready environment. So the next issue is how to deploy it.
Deployment Setting
I will show you how to deploy the docker image manually on Heroku instead of using Heroku build pack, what is the benefit?
- You have full control over what image you use
- It’s easier to migrate from Heroku to another cloud platform
- You don’t have to configure deployment constraints on Heroku!
Adding gitlab-ci.yml and heroku.yml Configurations
Note that the value of $HEROKU_APP_NAME and $HEROKU_API_KEY is set on your GitLab project on CI/CD variables.
This heroku.yml tells what we would build and use which Dockerfile for a certain environment.
Reference(s):
