使用docker部署vue

A few weeks ago at ng-conf, I announced the launch of vscodecandothat.com — a project I worked on with Sarah Drasner to centralize all of my favorite VS Code tips into a collection of short, silent video clips. It’s like a site full of GIFs, except without the 600 megabyte payload and crashed browser tab.

几周前，我在ng-conf上宣布启动了vscodecandothat.com ，这是我与Sarah Drasner共同致力于将所有我最喜欢的VS Code技巧集中到一个简短的无声视频剪辑中的项目。 这就像一个充满GIF的网站，除了没有600兆字节的有效载荷和崩溃的浏览器选项卡。

Sarah designed and built the site using Vue. I put together the video clips with excessive pug references.

Sarah使用Vue设计和建造了该站点。 我将视频剪辑中的帕格引用过多。

Sarah and I both work on the Azure team, so it was a good chance for us to use our own tools here at Microsoft to work with a real application. In this article, I’m going to break down how we do continuous delivery with vscodecandothat.com, and how you can do it yourself using the same tools we use.

我和Sarah都在Azure团队工作，因此这对我们来说是个很好的机会，可以使用Microsoft自己的工具来处理真实的应用程序。 在本文中，我将介绍如何使用vscodecandothat.com进行连续交付，以及如何使用与我们相同的工具自己进行交付。

Before we talk about the setup, I want to define exactly what I mean by “continuous delivery.”

在讨论设置之前，我想准确定义“连续交付”的含义。

连续的东西 (Continuous something-or-other)

The term Continuous Delivery refers to making releases easy, fast, and streamlined. We can argue about the exact definition of the term, but just remember that I am a front-end developer so my eyes may glaze over. I may snore. But go on. I swear I’m listening.

术语“持续交付”是指使发布变得容易，快速和简化。 我们可以争论这个术语的确切定义，但是请记住，我是一名前端开发人员，所以我的眼睛可能会蒙上眼睛。 我可能打sn。 但是继续。 我发誓我在听。

For our purposes, “Continuous Delivery” means that the process of building and deploying the site is completely automated. Here’s how that looks in real life:

就我们的目的而言，“连续交付”是指构建和部署站点的过程是完全自动化的。 这是现实生活中的样子：

• Developer checks code into Github master branch开发人员将代码检入Github master分支
• Build server pulls code from Github构建服务器从Github提取代码
• Build server runs a build (npm script)构建服务器运行构建(npm脚本)
• Build server creates a Docker container构建服务器创建一个Docker容器
• Build server pushes Docker container to registry构建服务器将Docker容器推送到注册表
• Burke finds the source of broccoli smell in his office伯克在他的办公室里发现西兰花味的来源
• Website pulls in updated container网站提取更新后的容器

Got all that? Basically, we’re going to automate everything that you would normally do as a developer so that checking code into Github is all you have to worry about. And lord knows that’s hard enough as it is.

知道了吗？ 基本上，我们将使您作为开发人员通常会执行的所有操作自动化，从而使您只需担心将代码检入Github中即可。 上帝知道这确实很难 。

OK, let’s begin at the beginning. The first thing we need to do is look at the application to see how it runs. And how it runs is “In a Docker, y’all.”

好，让我们从头开始。 我们需要做的第一件事是查看应用程序以了解其运行方式。 它的运行方式是“在Docker中，大家。”

在Docker上运行Vue (Running Vue on Docker)

vscodecandothat.com is entirely front-end driven. It’s all HTML, JavaScript, and CSS in your browser. That being the case, all we want to do is serve up the index.html page from the dist folder. We use an nginx web server.

vscodecandothat.com完全由前端驱动。 这是浏览器中的所有HTML，JavaScript和CSS。 在这种情况下，我们要做的就是从dist文件夹提供index.html页面。 我们使用Nginx Web服务器。

When you are just serving up static assets, the Dockerfile is very simple…

当您仅提供静态资产时，Dockerfile非常简单……

FROM nginx
WORKDIR /app
# Copy in the static build assets
COPY dist/ /app/
# Copy in the nginx config file
COPY misc/nginx.conf /etc/nginx/nginx.conf
# All files are in, start the web server
CMD ["nginx"]

Sarah created an nginx configuration file that we just copy in when the container gets built. Because you do not want to be in the business of configuring nginx (OMG you don’t), Sarah has posted her config file to a gist.

Sarah创建了一个nginx配置文件，我们在构建容器时将其复制到其中。 因为您不想从事nginx的配置(您不需要OMG)，所以Sarah将其配置文件发布到了gist上 。

I use the Docker extension for VS Code so that I can see and manage all of my images and containers. I’m not afraid of the terminal, but my brain can only remember so many flags.

我将Docker扩展用于VS Cod e，以便可以查看和管理所有图像和容器。 我不害怕终端，但是我的大脑只能记住很多标志。

Now we need a registry to push the container to. We’re going to configure Azure Container Services (ACR) for that.

现在我们需要一个注册表来将容器推送到。 我们将为此配置Azure容器服务 (ACR)。

You can create an ACR repository from the web portal, but to prove I’m not afraid of the terminal, we’ll do it with the Azure CLI.

您可以从Web门户创建ACR存储库，但是为了证明我不担心该终端，我们将使用Azure CLI进行操作 。

First, we need a group for resources. I called mine “vsCodeCanDoThat”.

首先，我们需要一组资源。 我称我为“ vsCodeCanDoThat”。

az group create — name vsCodeCanDoThat — location eastus

Now create the ACR repository. I called mine “hollandcr”.

现在创建ACR存储库。 我称我的为“ hollandcr”。

az acr create --resource-group vsCodeCanDoThat --name hollandcr --sku Basic

Now we can push our image to that by tagging it with the path to the Azure Container Registry.

现在，我们可以通过使用Azure容器注册表的路径对其进行标记，从而将映像推送到该映像。

hollandcr.azurecr.io/vscodecandothat:latest

In the video you can watch me login to the Azure Container Registry from the terminal. This is important because your push will fail if you are not logged in.

在视频中，您可以观看我从终端登录到Azure容器注册表的情况。 这很重要，因为如果未登录，则推送将失败。

OK — now we need a site to host our container. For that we use Azure App Service.

好的-现在我们需要一个托管容器的站点。 为此，我们使用Azure App Service。

创建应用程序服务 (Creating The App Service)

First create a Linux service plan. For that, you need your app name and your resource group.

首先创建一个Linux服务计划。 为此，您需要您的应用名称和资源组。

So

所以

az appservice plan create -n appName -g resourceGroupName --is-linux -l "South Central US" --sku S1 --number-of-workers 1

Becomes

成为

az appservice plan create -n vsCodeCanDoThatSP -g vsCodeCanDoThat --is-linux -l "South Central US" --sku S1 --number-of-workers 1

Now create the web app and point it at the container that was pushed to the AKS registry. This takes 4 parameters.

现在创建Web应用，并将其指向推送到AKS注册表的容器。 这需要4个参数。

• Service Plan服务计划
• Resource Group资源组
• App Name (you haven’t defined this yet)应用名称(您尚未定义)
• Docker image that you pushed earlier您之前推送的Docker映像

az webapp create -n vsCodeCanDoThatSP -g vsCodeCanDoThatRG -p vscodecandothat -i hollandcr.azurecr.io/vscodecandothat:latest

And that’s it. You’ll get back a URL, and you should be able to open it and see your site running.

就是这样。 您将获得一个URL，您应该可以打开它并查看您的网站正在运行。

Now what we want to do is automate everything that we just did. We never ever want to have to go through any of these steps again.

现在，我们要做的是使我们刚刚完成的所有工作自动化。 我们再也不想再经历任何这些步骤了。

The first thing we will do is to set up our site for “Continuous Deployment” from our container registry.

我们要做的第一件事是从容器注册表中为“持续部署”设置站点。

If you are using the App Service extension for VS Code, all of your Azure sites will show up right in the editor. You can just right-click and say “Open in Portal.”

如果您使用VS Code的App Service扩展，则所有Azure站点都将立即显示在编辑器中。 您可以右键单击并说“在门户中打开”。

Select the “Docker Container” menu option…

选择“ Docker Container”菜单选项...

On this page you will see the container you configured from the terminal. There is an option at the bottom to turn on “Continuous Deployment.”

在此页面上，您将看到从终端配置的容器。 底部有一个选项可以启用“连续部署”。

When you toggle this on and click “save,” a webhook will get created in your Azure Container Registry for this specific container. Now, anytime the image with tag “latest” is updated, the webhook will fire and notify App Service which automatically pulls in your image.

启用此选项并单击“保存”时，将在Azure容器注册表中为此特定容器创建一个Webhook。 现在，只要标签标签为“ latest”的图像更新，webhook就会启动并通知App Service，该服务会自动提取您的图像。

So we’ve automated some of this already. Once we push the image, it will be deployed. There is nothing we have to do besides push it. But we don’t want to push it. We want someone else to that.

因此，我们已经使其中一些自动化了。 一旦我们推送映像，它将被部署。 除了推动它，我们没有其他要做。 但是我们不想推动它。 我们想要其他人。

And who will do it? The robots, that’s who. Or whom? OR WHOMST. Fortunately I’m not in high school English anymore. I failed it once and that was enough.

谁来做？ 机器人，那就是谁。 还是谁 或WHOMST。 幸运的是我不再上高中英语了。 我一次失败了，那就足够了。

设置构建服务器 (Setting up a build server)

This is the point at which I tell you that we are going to use Visual Studio Team Services (VSTS). Then you say, “Visual Studio? I’m not using .NET”. And I say, “I know, it’s confusing.”

在这一点上，我告诉您我们将使用Visual Studio Team Services (VSTS)。 然后您说：“ Visual Studio？ 我没有使用.NET”。 我说：“我知道，这很令人困惑。”

We need a system specifically designed to automate builds and deployment. This is exactly what VSTS is/does. Also, it’s free for 5 users or less (in a project space) and “free” is the only word in my love language. The only word besides “beer.”

我们需要专门设计用于自动化构建和部署的系统。 这正是VSTS的作用。 而且，它对5个或更少的用户免费(在项目空间中)，“免费”是我爱语言中唯一的单词。 除“啤酒”外，唯一的词。

Create a VSTS account if you don’t have one. Once you do, you land on the dashboard screen.

如果您没有，请创建一个VSTS帐户 。 完成后，您将进入仪表板屏幕。

From here, you want to create a new team project.

在这里，您要创建一个新的团队项目。

Give your project a name and a description that nobody will find helpful. Leave the version control at Git.

给您的项目起一个名字和描述，没有人会对您有所帮助。 将版本控制保留在Git上。

The next screen gives you a Git URL to check your code into. But we already have Github, so just ignore that and select the “or build code from an external repository” option.

下一个屏幕为您提供一个Git URL，以将您的代码签入。 但是我们已经有了Github，因此只需忽略它，然后选择“或从外部存储库构建代码”选项即可。

Authorize VSTS to Github and select the repo…

将VSTS授权给Github并选择仓库

The next screen is offering to help you start with a template. In this case we are going to roll from an empty process. Because we are hard core like that.

下一个屏幕可帮助您从模板开始。 在这种情况下，我们将从一个空进程开始。 因为我们是那样的核心。

Now we are going to start adding steps for VSTS to perform to do the build and deployment. The pull from source control is already happening, so the first thing we need to do is to run npm install on our code. To do that, add a task to “phase 1”. There is only 1 phase in our build / deployment.

现在，我们将开始为VSTS添加执行步骤以执行构建和部署。 从源代码控制中获取信息已经发生了，因此我们要做的第一件事是在代码上运行npm install 。 为此，请将任务添加到“阶段1”。 我们的构建/部署只有1个阶段。

Search for “npm” and add the npm task.

搜索“ npm”并添加npm任务。

By default, you get the npm install task, which is exactly what we want. You don’t need to add any options to this task.

默认情况下，您将获得npm install任务，这正是我们想要的。 您无需为此任务添加任何选项。

Next, we’ll be running the npm run build command, which will build a production instance of our Vue app with all of its Webpacking magic. For that, add another npm task. This time, change the name to “npm run build.” Set the “command” to “custom” and the “command and arguments” to “run build.”

接下来，我们将运行npm run build命令，它将使用其所有Webpacking魔术功能构建Vue应用程序的生产实例。 为此，添加另一个npm任务。 这次，将名称更改为“ npm run build”。 将“命令”设置为“自定义”，将“命令和参数”设置为“运行构建”。

Great! We’ve got the build, now we’re ready to Dockerize it. Add a new task and find the “Docker” one.

大！ 我们已经有了构建，现在我们可以对其进行Dockerize。 添加一个新任务并找到“ Docker”任务。

This is a big screen, so here’s the image and then we’ll walkthrough the highlights.

这是一个大屏幕，所以这是图像，然后我们将重点介绍高光。

• You are selecting the “Azure Container Registry”您正在选择“ Azure容器注册表”
• Specify your Azure subscription指定您的Azure订阅
• Specify your registry name (which we created earlier)指定您的注册表名称(我们之前创建的名称)
• Set the “Image Name” to $(Build.Repository.Name)将“映像名称”设置为$(Build.Repository.Name)
• Make sure you check the “Include Latest Tag”确保您选中“包括最新标签”

Lastly, we want to push the image. Add another Docker task. This time, set the “Action” to “Push an image”. Set the “Image Name” to $(Build.Repository.Name) — just like before.

最后，我们要推送图像。 添加另一个Docker任务。 这次，将“动作”设置为“推送图像”。 像以前一样，将“映像名称”设置为$(Build.Repository.Name)。

DO NOT SELECT THE “PUSH IMAGES” ACTION. If you do, your build will fail and you will blame god and all humanity before you figure out that you selected the wrong action. Don’t ask me how I know that.

请勿选择“按图像”操作 。 如果这样做，您的构建将失败，并且在您确定选择错误的动作之前，您将责怪上帝和全人类。 不要问我我怎么知道的。

And that’s it for defining the Build definition. You can now click “save and queue” at the top. Make sure that you select a “Hosted Linux Preview” agent. The Docker tasks needs the Linux agent.

这就是定义Build定义的过程。 现在，您可以单击顶部的“保存并排队”。 确保选择“托管Linux预览”代理。 Docker任务需要Linux代理。

Now sit back and wait for a build to kick off. If you’ve done everything right, you have now setup a completely automated build and deployment system for a Vue app that utilizes Docker and Azure. That’s the most buzzwords I’ve ever squeezed into one sentence.

现在坐下来，等待构建开始。 如果您做对了所有事情，那么现在您可以为利用Docker和Azure的Vue应用程序设置一个完全自动化的构建和部署系统。 那是我压缩成一句话以来最流行的词。

部署并开心 (Deploy and be happy)

This seems like a lot to setup, but once you have it just like you want it, all you have to do is check in code to your Github repo and all of this manual deployment ? happens automatically. Your customers will love you. Your developers will love you. Heck — even YOU might love you.

这似乎需要很多设置，但是一旦您拥有了想要的设置，您所要做的就是将代码签入Github存储库以及所有手动部署？ 自动发生。 您的客户会爱上您。 您的开发人员将爱您。 哎呀，甚至你可能爱你。

I hope you find this helpful. I’m off to update my résumé with all of these buzzwords.

我希望你觉得这有帮助。 我打算用所有这些流行词来更新我的简历。

翻译自: https://www.freecodecamp.org/news/how-you-can-do-continuous-delivery-with-vue-docker-and-azure-2f1e31fff832/

使用docker部署vue