Docker for Devs Part 3: Hot Module Reloading and Live Editing in Express.js App  ...
Part 1:Containerize your Application Environment Part 2:Creating a Developer Image Part 3: Hot Module Reloading and Live Editing in Containers (this post) Composing Multi-container Networks Sharing Images with Your Team Using Docker Hub Bonus: Debug Docker Containers with WebStorm

So far in this Docker for Developers tutorial, we’ve got a crash course in setting up Docker and establishing a baseDocker production image and developer image using a simple node.js application involving the express.js framework. Continuing in this Docker tutorial, we’re going to look at a real world example of hosting a universal (isomorphic) React application with an express.js server. Not only that, the developer build of this application utilizes Hot Module Reloading with the use of Webpack’s dev-server for immediate client updates during development.

While the overall goal is to show you how to utilize Docker for modularizing development environments that consist of any number of elements, in this specific part of the tutorial we are going to establish the application container. In the following part of the tutorial we’ll add onto it with the inclusion of networking containers for a database and reverse proxy.

Docker Tutorial: Getting Started with Live Editing Docker Containers

To start off, you can grab the source code for the application from GitHub that will use throughout this tutorial .

Step 1: Create a Production Image File Like before, we need a base image. However, if we use a Alpine linux image like we did in the [URL LINK] first tutorial, we’ll be missing some necessary linux libraries that used by node-sass to compile SASS files. It’s not hard to have the Dockerfile RUN the necessary fetch command to acquire the missing libraries, or we can use a different base image that has all the necessary dependencies. Using your IDE of choice, add a file with the name “ Dockerfile” to the project root: Copy in the below file contents
FROM beevelop/nodejs-python MAINTAINER Max McCarty ENV NODE_ENV=production PORT=7000 COPY . /var/app WORKDIR /var/app EXPOSE $PORT RUN npm install --production RUN npm run build:prod CMD ["npm", "run", "start:prod", "--production"]

Note : This image has approx. 1/3 larger footprint but takes about half the time to build. If you want to still use the smaller base image, you can grab this alternative Dockerfile .

What did we do?

Without rehashing some of the area’s we covered in the previous two parts of this tutorial, the following are some of the new Dockerfile commands or variations we haven’t seen:

We’ve specified a MAINTAINER which is simply the author and any choice of verbiage to specify how someone might contact the maintainer if needed. In addition, we have specified multiple RUN commands that will be ran in order synchronously. Specifically, we are requesting that only the production NPM modules be installed in the image along with having the npm script we have specified in our package.json file labeled “ build:prod” which will generate our production version of static files our application will serve . Though the CMD command isn’t new, you can see that we can specify any number of parameters in our array. Step 2: Create the Base Production Image Verify there is no “public” or “node_modules” in the root of the project
Docker for Devs Part 3: Hot Module Reloading and Live Editing in Express.js App  ...
From a terminal/prompt navigate to the root of our project directory. Run the command ( including the period at the end) :
dockerbuild -t hackershall-prod-i .


Docker for Devs Part 3: Hot Module Reloading and Live Editing in Express.js App  ...
Step 2b: Verify Image

Run the image command to see what images exists:

Docker for Devs Part 3: Hot Module Reloading and Live Editing in Express.js App  ...
Step 3: Create the Production Container

TIP: Creating a container (instance of our image) to verify there are no problems, can help reduce future issues that show up in downstream images.

Run the command

dockerrun -d --namehackershall-prod-app -p 7000:7000 hackershall-prod-i Step 3a: Check Container Logs

You might be tempted to assume you have to run in attached mode (without the detached -d flag ) in order to see the output and any errors. However, we can still acquire the output of a generated and ran container using the following command:

Docker for Devs Part 3: Hot Module Reloading and Live Editing in Express.js App  ...
Step 3b: Validate Static Files Part of th

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: DockerGitReactLinuxGitHubSASTI
tags: image,Docker,tutorial,our,prod
本文标题:Docker for Devs Part 3: Hot Module Reloading and Live Editing in Express.js App ...

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(119)