Dockerize您的Angular NodeJS应用程序 [英] Dockerize your Angular NodeJS application

问题描述

我们有一个前端应用程序。
它是用Angular（html + css + javascript）编写的，需要由webserver（nginx）托管。
Angular正在与NodeJs服务器进行通信，该服务器将与后端通信。

现在我们必须在Docker中运行。

• 我们要使用2 Docker容器：一个带有nodejs，一个带有nginx，并让它们一起工作

那么可以在一个文件中写入2个docker文件库？
主要的想法是为nodejs设置1个docker文件，该文件还运行着安装，npm install，...
，它将如下所示：

 ＃创建应用程序目录
 RUN mkdir -p / usr / src / www 
 WORKDIR / usr / src / www 
 
 RUN npm install -g bower 
运行npm install -g gulp 
 
＃安装应用依赖项
 COPY。 / usr / src / www / 
运行bower安装
运行npm安装
运行gulp构建
 
 EXPOSE端口
 CMD [node，服务器.js] 
  

还有一个docker文件，其中我们运行一个nginx-webserver，但也包括一个nginx .conf，所以它可以指向我们的node.js-container中的右/ dist文件夹
nginx的docker文件将如下所示：

 ＃设置nginx基本图像
从nginx 
 
＃从当前目录复制自定义配置文件
 COPY nginx.conf /etc/nginx/nginx.conf 
  

nginx.conf的一个例子

  location〜* / dist {
 proxy_pass http：// nodejs：port; 
 proxy_http_version 1.1; 
 proxy_set_header升级$ http_upgrade; 
 proxy_set_header连接'升级'; 
 proxy_set_header Host $ host; 
 proxy_cache_bypass $ http_upgrade; 
  

解决方案

使用2码头容器是我看来最好的选择每个容器设计的单一责任值得关注。

每个项目都需要创建多个容器是非常常见的：

• 数据库


• 后端服务器


• 前端服务器

一种方法是为Docker定义创建一个文件夹，并为每个docker上下文创建一个脚本 docker_build.sh ，以准备Docker上下文（复制所需的所有工件：libs，源代码等），最后使Docker构建。

  project_root / 
 | ---- src / 
 | ---- docker / 
 | ---- | ---- angular / 
 | ---- | ---- | ----- Dockerfile 
 | ---- | ---- | ----- docker_build.sh 
 | ---- | ---- nodejs / 
 | ---- | ---- | ----- Dockerfile 
 | ---- | ---- | ----- docker_build.sh 
  

docker_build.sh的一个例子/ p>

 ＃！/ bin / bash 
 
＃创建临时目录建立
 mkdir DockerBuildTempPath / 
 
＃将文件复制到临时目录
 cp -arv Dockerfile DockerBuildTempPath / 
 cp -arv ../../src/ DockerBuildTempPath / 
＃...等
 
 cd DockerBuildTempPath 
 
 #build image 
 docker build -t myapp。 
 
＃删除临时目录
 cd .. 
 rm -r ./DockerBuildTempPath/ 
  

We have an front-end application. It's written in Angular (html + css + javascript) which needs to be hosted by a webserver (nginx). Angular is communicating with a NodeJs server which will communicate with the backend.

Now we have to run this in Docker.

• We want to use 2 Docker containers: one with nodejs and one with nginx and let them work together

So is it possible to write 2 dockerfiles in the one repository? The main idea is to have 1 dockerfile for nodejs which is also running the bower install, npm install, ... which will look like this:

# Create app directory
RUN mkdir -p /usr/src/www
WORKDIR /usr/src/www

RUN npm install -g bower
RUN npm install -g gulp

# Install app dependencies
COPY . /usr/src/www/
RUN bower install
RUN npm install
RUN gulp build

EXPOSE port
CMD [ "node", "server.js" ]

And one dockerfile in which we run a nginx-webserver but will also include a nginx.conf so it can point to the right /dist folder in our node.js-container The dockerfile of nginx will look like this:

# Set nginx base image
FROM nginx

# Copy custom configuration file from the current directory
COPY nginx.conf /etc/nginx/nginx.conf

An example of the nginx.conf

location ~* /dist {
            proxy_pass http://nodejs:port;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;

解决方案

Using 2 docker containers is the best option in my opinion, single responsibility per container design is worth to follow.

It's very common having to create more than one container per project:

• database
• backend server
• frontend server

One approach is create a folder for docker definitions and for each docker context, create an script docker_build.sh that prepares the docker context (copy all the artifacts required: libs, source code, etc) and finally make the docker build.

project_root/
|----src/
|----docker/
|----|----angular/
|----|----|-----Dockerfile
|----|----|-----docker_build.sh
|----|----nodejs/
|----|----|-----Dockerfile
|----|----|-----docker_build.sh       

An example of docker_build.sh

#!/bin/bash

# create temp directory for building
mkdir DockerBuildTempPath/

# copy files to temp directory
cp -arv Dockerfile DockerBuildTempPath/
cp -arv ../../src/ DockerBuildTempPath/
# ... etc

cd DockerBuildTempPath

#build image
docker build -t myapp .

# remove temp directory
cd ..
rm -r ./DockerBuildTempPath/

这篇关于Dockerize您的Angular NodeJS应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！