使用Bitbucket管道在Google VM上部署Angular应用程序


Angular是使用最广泛的JavaScript框架之一。但是,尽管构建很容易,开发人员在配置部署和设置CI/CD管道时仍面临一些问题。本文概述了使用Bitbucket管道将Angular应用程序部署到Google VM所需的步骤。

什么是管道?

Bitbucket Pipelines允许开发人员配置源文件到测试/生产服务器的连续交付(在云中)。这些管道被配置为使用YAML脚本连接到生产服务器。

为什么我要用管道

为了使用户能够访问应用程序,需要将源代码部署到服务器上。将web应用程序呈现/交付给用户的服务器称为生产服务器。并且在应用程序到达生产服务器之前,它要经历许多迭代的开发和测试。这些迭代通常部署到开发服务器或阶段服务器。

Web开发过程

要将应用程序部署到上述每一台服务器上,有几个步骤可能会变得很麻烦。

  • 将代码文件复制到服务器。
  • 运行构建和部署脚本。
  • 在每台服务器上重复相同操作。有时团队每个阶段都有多个服务器。

好啦!上面的工作在某种程度上已经被Jenkins这样的工具自动化了,但是缺点是开发人员/管理员必须在他们的服务器上安装另一个软件,并学习使用和管理它。

管道简化了上述过程,而且事实上自动化了整个构建和部署过程--也称为CI/CD(持续集成/持续部署)。Bitbucket管道的最大优点是可以直接从Bitbucket存储库构建应用程序并将其部署到任何目标服务器。

整个复制,构建和部署过程可以使用简单的基于YAML的脚本来定义,而不需要任何额外的软件或解决方案。我们所需要做的就是为管道选择Docker映像(如Node.js,Java等),用于构建项目,并选择频率(例如手动,或者在源存储库中更新文件时自动)。这为团队和组织节省了大量的时间和资源。

教程:在Bitbucket上配置Angular项目

本教程介绍了如何将基于Angular的web应用程序部署到Google Cloud虚拟机(VM)。应用程序的源代码在Bitbucket存储库中,并且需要使用SSH安全密钥连接该VM。

先决条件

  • 具有私有和公共SSH密钥的外部服务器(或VM)。这将是网站或web应用程序的主机。
  • 存储库位于 Bitbucket使用项目源文件。这些将用于构建和部署到服务器。

步骤1:设置SSH密钥

在Bitbucket>项目源存储库>设置>管道>SSH密钥下。

添加私钥和公钥。您需要从需要连接的外部服务器获取这些信息。

添加已知主机(这将是您希望将代码推送到的外部服务器的IP地址。在我们的示例中,我们使用了Google Cloud上的一个VM)。

步骤2:定义YAML部署脚本

转到Project source repository>Pipelines>New pipeline并定义脚本。下面是一个示例脚本:

# Sample build file
# @author Suren Konathala
# -----
image: node:8
pipelines:
  default:
- step:
     caches:
       - node
     script: # Modify the commands below to build your repository.
       - echo "$(ls -la)"
       - npm install
       - npm install -g @angular/cli
       - ng build --prod
       - echo "$(ls -la dist/)"
       - scp -r dist/ user@34.73.227.137:/projects/commerce1

上面的脚本执行构建Angular项目所需的命令/步骤。一旦完成,它将dist文件夹下的构建文件的内容推入/部署到外部服务器。

在本例中,我们使用了一个SCP命令将代码推送到外部服务器。由于SSH密钥已经在上面的步骤1中设置,所以您的本地repo现在可以连接到服务器并复制文件。

步骤3:运行管道

保存并“运行管道”。您可以看到管道的运行日志和状态。

成功完成后,您可以通过测试live应用程序并检查是否反映了最新的更新,或者手动检查服务器上的文件是否已更新(不需要每次推送都这样做)来验证文件是否正在实际复制到外部服务器。

故障排除

要更新管道中的node.js版本,请将Docker节点映像的版本更改为node:8在YAML脚本中。

image: node:8

要知道您所在的文件夹以及正在生成的文件,可以使用echo命令。一些例子。

echo "Starting the deployment.."
echo "$(ls -la)"


参考文献

  • post演示如何在Linux服务器/虚拟机上添加SSH密钥。

  • 共享此项目的源文件 here

  • 了解有关生成Angular项目的更多信息here