In this post, I am going to show how to build and containerize a Vue.js application and let it run on Container Cloud Service (OCCS) using the following steps:
- Build a Vue.js Web App
- Build Docker image based on the above Vue.js SPA
- Push it on Docker-Hub
- Create a Service in Oracle Container Cloud Service (OCCS)
- Deploy Service (the vue.js app)
- You have docker installed on your development machine . Info: I have done this on Win 10 and docker 1.27
- You have Node.js (Version 6 and above ) installed on your development machine.
- You have an account with Docker Hub
- You have an access to a trial service with Oracle Container Cloud Service.
For a Vue.js-based SPA, here are the tools and libraries that make up the client side structure :
- View Layer: Vue.js
- Routing: vue-router, the official router for Vue.js.
- State Management: vuex, a state-management solution inspired by Flux/Redux, but designed specifically for Vue.
- Server Communication: vue-resource, plugin for interfacing with a RESTful backend.
- Build Tool: Webpack + vue-loader for modules, hot-reloading, ES2015, pre-processors and most importantly, single-file Vue components. The entire build tool chain relies on Node.js, and we will be managing all our library and tool dependencies using NPM
Build a Vue.js Web App
Let’s build a quick Vue.js sample app. I was pretty amazed by vue-cli that helps to bootstrap a SPA in little to no time and this command line interface makes the vue.js build tasks pretty trivial.
From your Node.js prompt window execute the below commands:
npm install -g vue-cli
vue init webpack HelloWorld
Key in the prompts and the CLI will scaffold a project with all the above features working out of the box.
cd HelloWorld npm install # install dependencies npm run dev # start dev server at http://localhost:8080
For full details on what is included in the generated project, check out the project template documentation. You should have a sample vue.js application accessible from the browser. I explored this framework further, reading few tutorials and samples, tracking some git hub projects, I was able to build a full-fledged Vue.js application that leverages bootstrap theme, communicates with back-end REST API’s and renders the information on the web page. You can access working sample project from my github.
Build Docker image based on the above Vue.js SPA
Now that we built our sample application, let’s dockerise this SPA.
- Create a Dockerfile in the Web App root folder as below (Refer the Dockerfile from the above github project).
FROM node:boron # Create app directory RUN mkdir -p /usr/src/app WORKDIR /usr/src/app # Install the app dependencies COPY package.json /usr/src/app/ RUN npm install # Bundle app source COPY . /usr/src/app EXPOSE 8080 CMD ["npm", "run", "dev"]
- Create the .dockerignore file at the same location and add the below entries.
- Create a Docker Container: Execute this docker command from the application path.
docker build -t <Image_Name> .
- List and run the Docker Image and grab the container id:
list the images : docker images
docker run -p 49160:3000 -d <Image_Name>
Push it on Docker Hub
- Register on docker hub with the repository name
- connect to docker hub
docker login --username=<dockerhubusername> --email=<dockerhubemail>
- Tag your image
docker tag <image_id> image_name:latest
- Push the image to the Docker Hub
docker push yourhubusername/image_name
Deploy and Run it on Oracle Container Cloud Service (OCCS)
- Register your Docker Hub Account with OCCS from the container console
- Create a Service in OCCS from the container console, fill in the Service name, Image details and the ports configuration.
- Save the changes
- Once the service is defined, just hit the deploy button.
- Check the docker image being pulled from the registry to OCCS.
- Once deployment is completed, click on the deployed container and check the host details.
- Access the application : http://host-ip:8080
You now have a dockerised Vue.Js application shipped and deployed on Oracle Container Cloud service and is available for public access.
Thank you for your time.