Cloud Native programming with Golang by Mina Andrawos

Author:Mina Andrawos
Language: eng
Format: epub, mobi
Publisher: Packt Publishing
Published: 2017-12-28T05:49:16+00:00

docker image ls output

Building containers for the frontend

Now that we have container images for our backend applications, we can direct our attention to the frontend application. Since this application runs in the user's browser, we do not really need a containerized runtime environment for it. What we do need though is a way to deliver the application to the user. Since the entire application consists of a bit of HTML and JavaScript files, we can build a container image that contains a simple NGINX web server that serves these files to the users.

For this, we will be building on the nginx:1.11-alpine image. This image contains a minimal version of the NGINX web server, built on Alpine Linux. Alpine is a Linux distribution optimized for small size. The entire nginx:1.11-alpine image is only 50 MB in size.

Add the following Dockerfile to your frontend application directory:

FROM nginx:1.11-alpine COPY index.html /usr/share/nginx/html/ COPY dist /usr/share/nginx/html/dist/ COPY node_modules/bootstrap/dist/css/bootstrap.min.css /usr/share/nginx/html/node_modules/bootstrap/dist/css/bootstrap.min.css COPY node_modules/react/umd/react.production.min.js /usr/share/nginx/html/node_modules/react/umd/react.production.min.js

COPY node_modules/react-dom/umd/react-dom.production.min.js /usr/share/nginx/html/node_modules/react-dom/umd/react-dom.production.min.js COPY node_modules/promise-polyfill/promise.min.js /usr/share/nginx/html/node_modules/promise-polyfill/promise.min.js COPY node_modules/whatwg-fetch/fetch.js /usr/share/nginx/html/node_modules/whatwg-fetch/fetch.js

Obviously, our web server will need to service both the index.html and the compiled Webpack bundle at dist/bundle.js to the users, so these are copied into the container image with COPY. However, from all the dependencies installed into the node_modules/ directory, our users will need only a very specific subset. For these reasons, we are copying these five files explicitly into the container image, instead of just using COPY for the entire node_modules/ directory.

Before actually building the container image, ensure that you have a recent Webpack build of your application and all dependencies installed. You can also use the -p flag to trigger Webpack to create a production build of your application that will be optimized for size:

$ webpack -p $ npm install

After this, build your container:

$ docker container build -t myevents/frontend .

You can now start this container using the following command:

$ docker container run --name frontend -p 80:80 myevents/frontend

Note that we are not passing the --network=myevents flag in this case. This is because the frontend container does not actually need to communicate with the backend services directly. All communication is initiated from the user's browser, not from within the actual frontend container.

The -p 80:80 flag binds the container's TCP port 80 to your local TCP port 80. This allows you to now open http://localhost in your browser and view the MyEvents frontend application. If you still have the backend containers from the previous sections running, the application should work out of the box.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.