以Nuxt.js为例，部署同构Web应用程序。

在大中型项目中，站点不限于一种服务-例如，仅一个站点，通常有一个数据库，一个API，一个将请求路由到所有这些服务的服务器。 在没有任何标准化的情况下推出和更新所有这些内容并不容易，并且扩展到许多服务器甚至更加困难。

Docker已经成为包装，交付和发布应用程序世界中的事实上的标准，它将帮助我们解决这个问题。

Docker允许我们将具有所有依赖项和设置的应用程序或服务包装在一个隔离的容器中，从而确保任何平台上内容的一致性。

作为同构应用程序，我们将使用由Vue.js和Node.js组成的Nuxt.js框架，从而使我们能够编写具有服务器端呈现（SSR）的通用Web应用程序。

该选择是由于个人喜好，但是以相同的方式，您可以采用任何其他框架，例如Next.js。

我们收集并发布第一张图片。

首先，您需要在应用程序内部配置端口和主机。 有几种方法可以执行此操作，我们将通过添加一个新部分来使用package.json中的设置：

"config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } } 

要执行进一步的操作，我们需要在系统中安装docker，docker-compose和带有打开项目的编辑器。

创建一个放置在根目录下的Dockerfile并描述构建映像的说明。

我们需要基于Node.js版本10映像构建映像，在这种情况下，将使用轻量级的alpine版本：

 FROM node:10-alpine 

然后使用目录名称设置环境变量：

 ENV APP_ROOT /web 

设置为工作目录并添加源：

 WORKDIR ${APP_ROOT} ADD . ${APP_ROOT} 

安装依赖项并构建应用程序：

 RUN npm ci RUN npm run build 

然后在图像中编写应用程序启动命令：

 CMD ["npm", "run", "start"] 

之后，在终端中打开当前文件夹并收集图像：

 docker build -t registry.gitlab.com/vik_kod/nuxtjs_docker_example . 

在本地运行映像以验证一切正常：

 docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example 

转到localhost：3000，我们应该看到以下内容：



太好了！ 我们成功启动了在本地计算机上构建应用程序的生产。

现在，我们需要将映像发布到docker存储库，以便在目标服务器上使用完成的组装映像。 您可以使用自托管存储库，也可以使用其他任何存储库，例如，官方hub.docker.com 。

我将在gitlab中使用存储库，其中包含docker仓库的选项卡称为注册表。 以前，我已经为项目创建了一个存储库，因此现在执行命令：

 docker push registry.gitlab.com/vik_kod/nuxtjs_docker_example 

映像成功启动后，您可以开始配置VPS服务器，
我的如下：

• 1 GB内存
• 4芯
• 30 GB驱动器

我还趁机在创建服务器时立即安装了docker，因此，如果未在VPS上安装docker，则可以阅读官方网站上的说明。

创建服务器后，转到它并登录到docker存储库，在我的情况下为gitlab：

 docker login registry.gitlab.com 

授权后，我们可以使用以前看到的命令启动应用程序：

 docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example 

图像已下载并启动，让我们检查一下：



我们看到了一张熟悉的图片，我们使用应用程序启动了容器，但是已经在远程服务器上。

最后的接触仍然存在，现在当终端关闭时，图像将停止，因此我们将添加-d属性以在后台启动容器。
停止并重新启动：

 docker run -d -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example 

现在，我们可以关闭终端并确保我们的应用程序正常运行。

我们实现了所需的工作-我们在docker中启动了该应用程序，现在它既适合作为独立映像又可以作为较大基础架构的一部分适合部署。

添加反向代理

在当前阶段，我们可以发布简单的项目，但是如果我们需要将应用程序和API放在同一域上，并且除了此以外，还不通过Node.js提供静态信息，该怎么办？

因此，需要所谓的反向代理服务器，所有请求都将接收到该反向代理服务器，并根据该请求重定向到相关服务。

作为这样的服务器，我们将使用nginx。

如果单独管理多个容器，则管理容器不是很方便。 因此，我们将使用docker-compose作为组织和管理容器的方法。

创建一个新的空项目，在该项目的根目录中添加docker-compose.yml文件和nginx文件夹。

在docker-compose.yml中，我们编写以下代码：

 version: "3.3" #      services: #  , nginx nginx: image: nginx:latest #   80  http  443  https ports: - "80:80" - "443:443" #      container_name: proxy_nginx volumes: #   nginx ,      - ./nginx:/etc/nginx/conf.d #            - ./logs:/var/log/nginx/ #   Nuxt.js  nuxt: #     image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app #        ports: - "3000:3000" 

在nginx文件夹中，添加配置（这是官方网站Nuxt.js的建议），并进行了一些小的更改。


我们执行以下命令来运行：

 docker-compose up 

一切都正确启动，现在，如果我们转到侦听nginx的地址localhost，我们将看到我们的应用程序，不会有视觉差异，但是现在所有请求都首先到达nginx，根据指定的规则将它们重定向。

现在我们没有其他服务或静态变量，让我们添加一个静态文件夹，在其中放置一些图像。

通过在docker-compose中添加一行来将其安装在nginx容器中：

 ... container_name: proxy_nginx volumes: #     - ./static:/var/www/static ... 

然后将新位置添加到nginx.conf中：

 location /static/ { try_files $uri /var/www/static; } 

重新启动docker-compose：

 docker-compose up --build 

转到localhost / static / demo.jpg




现在通过Nginx给出了静态变量，从而消除了主应用程序中Node.js的负载。

确保一切正常后，您可以在服务器上发布我们的程序集。 为此，我将在当前目录中创建一个存储库。 先前已将日志和静态文件夹添加到.gitignore。

之后，我们转到服务器，停止先前启动的docker映像并克隆存储库。



在开始组装之前，您需要将包含静态变量的文件夹移动到服务器，转到本地计算机上的终端，然后使用scp命令行实用程序将文件夹移动到服务器：

 scp -r /Users/vik_kod/PhpstormProjects/nuxtjs_docker_proxy_example/static root@5.101.48.172:/root/example_app/ 

如果静电量很大，最好先压缩该文件夹并将其作为存档发送，然后在服务器上将其解压缩。 否则，下载可能需要很长时间。

我们返回到服务器上的终端，然后转到克隆的文件夹，运行命令：

 docker-compose up -d 

关闭终端并转到站点：




太好了！ 使用反向代理，我们从应用程序中分离了静态变量。

进一步的步骤

上面我们所做的只是一个相当简单的选择，在大型项目中，您需要考虑更多事情，以下是您下一步可以做的简短清单。

• 静态管理区域，SPA应用程序和数据库的仅数据容器
• 用于图像处理和优化的附加服务， 示例
• 集成CI / CD，在推送到所选分支时进行映像组装，以及自动更新和重新启动服务
• 如果服务器多于1个，则创建一个Kubernetes或Swarm集群，以实现负载平衡和轻松的水平扩展

合计

• 我们已经在服务器上成功发布了该应用程序，并为进一步扩展做好了准备。
• 我们认识了docker，并了解了如何将应用程序包装在容器中。
• 我们了解了可以采取哪些进一步措施来改善基础架构。

源代码

应用程式
设定档

感谢您的关注，希望本文对您有所帮助！