Docker + Angular + Nginx

Docker 化 Angular 应用程序

参考文献

最近，我一直在研究 DevOps 和云技术，并遇到了这项名为 Google Cloud Run 的服务，它可以让您托管应用程序，但唯一困扰我的是它需要一个 docker 镜像，而此时，我根本不知道 docker、容器、镜像或这些词是什么意思。😕

因此，就像任何周末没有社交生活的理智人一样🤪我开始学习 Docker，一开始，它确实看起来有点挑战性，但最终，我认为这个过程相当简单和有趣。

因此，如果您对 Docker 和容器一无所知，我在底部放了一些对我非常有用的链接。

以下是 Docker 的总结🐳

Docker 是一个容器运行时。就是这样🤯。它允许我们运行容器化的应用程序。

那么容器是什么？📦

容器是轻量级、可移植且独立的进程，它们在您的系统上使用相同的操作系统内核和用户空间运行，但每个进程都有自己的一组特定的依赖关系，这些依赖关系不会相互冲突。

还有图片？🙄

Docker 镜像是用于在容器中执行代码的文件。它包含应用程序代码、库、工具、依赖项以及运行应用程序所需的其他文件。

别再浪费时间了，让我们开始讨论正题

Docker 化 Angular 应用程序

现在显然你需要在系统中安装一些东西

Docker（下载链接）
NodeJS（下载链接）
Angular CLI（下载链接）
Visual Studio 代码（可选）（下载链接）

步骤 1：创建 Angular 应用程序

这个非常基础，我们不会在这里构建任何花哨的东西，只有预先构建的模板才适用于本教程。

要创建您的角度应用程序，只需在您想要创建应用程序的文件夹中打开终端，然后写入以下命令。

ng new my-docker-angular-app

现在，一旦完成，你应该会生成一个角度应用程序，在 VS 代码中打开它

步骤2：创建Dockerfile和.dockerignore

Dockerfile

在应用程序的主文件夹中，创建一个新文件并将其命名为“ Dockerfile ”。在该文件中，写入以下命令

### STAGE 1:BUILD ###
# Defining a node image to be used as giving it an alias of "build"
# Which version of Node image to use depends on project dependencies 
# This is needed to build and compile our code 
# while generating the docker image
FROM node:12.14-alpine AS build
# Create a Virtual directory inside the docker image
WORKDIR /dist/src/app
# Copy files to virtual directory
# COPY package.json package-lock.json ./
# Run command in Virtual directory
RUN npm cache clean --force
# Copy files from local machine to virtual directory in docker image
COPY . .
RUN npm install
RUN npm run build --prod


### STAGE 2:RUN ###
# Defining nginx image to be used
FROM nginx:latest AS ngi
# Copying compiled code and nginx config to different folder
# NOTE: This path may change according to your project's output folder 
COPY --from=build /dist/src/app/dist/my-docker-angular-app /usr/share/nginx/html
COPY /nginx.conf  /etc/nginx/conf.d/default.conf
# Exposing a port, here it means that inside the container 
# the app will be using Port 80 while running
EXPOSE 80

Docker忽略

如果您使用过 git 并且了解 .gitignore，.dockerignore 的作用是一样的，它指定了我们在创建 docker 镜像时想要忽略的文件。
通常它可能包含 node_modules、测试文件等...
要创建 dockerignore，只需创建一个文件并命名为“ .dockerignore ”。
对于我们的应用程序，只需在文件中写入以下内容

.git
.editorconfig
/.vscode/*
/node_modules
/e2e
/docs
.gitignore
*.zip

步骤3：创建nginx.conf

我们将使用 Nginx 在容器内托管 Angular 构建。为此，我们需要为 nginx 创建一个配置文件。
在主文件夹中创建一个文件，并将其命名为“ nginx.conf ”。

注意：我们在这里告诉 nginx 监听 80 端口，因为这是我们在 Dockerfile 中暴露的端口（参考）。这需要与我们在那里定义的端口一致。

server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

步骤 4：创建 docker 镜像

要创建 docker 镜像，请在项目文件夹中打开终端并输入以下命令

docker build -t ng-docker-app:v1.0.0 -f ./Dockerfile .

-t：标签（如果未指定，docker 将默认采用“最新”）
-f：文件（写入 Dockerfile 的路径）

完成此操作后，我们应该会在系统中创建一个 Docker 镜像。要获取系统中的 Docker 镜像列表，请在终端中输入以下命令：

docker image ls

步骤5：创建docker容器

要创建并托管你的docker容器，请输入以下命令

docker run -p 8000:80 -d ng-docker-app:v1.0.0

-p：端口
在这里，您需要定义容器托管的端口以及容器内托管应用程序的端口
语法：<host-port>:<docker-port>
-d：分离
如果未指定，docker 将保持控制台运行

注意：我们在 Dockerfile 中暴露了端口 80，并指定 nginx 监听端口 80，因此这里的 <docker-port> 也必须相同

要获取系统中当前正在运行的容器列表，您可以通过键入

docker container ls

最后

瞧！🎉如果你按照每个步骤操作，你的 docker 容器应该在端口 8000 上运行，而你的应用程序应该在localhost:8000上运行😎

参考文献

如何在 Windows 10 上安装 docker？
如何在 Mac OS 上安装 docker？
如何在 Ubuntu 上安装 docker
？Freecodecamp - docker 有什么用？
Freecodecamp - Docker 手册
 IBM - 什么是 docker？

文章来源：https://dev.to/oneofthedevs/docker-angular-nginx-37e4