[英]Build Node/Express using Github Actions and deploy to Azure Web App
I have a Node/Express project which use the azure-ts-node-starter project.我有一个使用 azure-ts-node-starter 项目的 Node/Express 项目。 By default it compiles Typescript from /src into /dist (package.json below)
默认情况下,它将 Typescript 从 /src 编译到 /dist (下面的 package.json)
I'd like to delpoy to Azure every time I upload to the master branch of my Github repo but I'm not sure what to do with src/dist folders.每次我上传到我的 Github 存储库的主分支时,我都想删除到 Azure,但我不确定如何处理 src/dist 文件夹。
Should I build on my PC, then commit everything, which I think would give me the choice of using Azure deployment center OR Github actions (not sure of the difference yet) to deploy the whole project or...我是否应该在我的 PC 上构建,然后提交所有内容,我认为这会让我选择使用 Azure 部署中心或 Github 操作(尚不确定差异)来部署整个项目或...
Could I put the /dist folder in gitignore and only upload src files, then somehow build it every time I push to master?我可以将 /dist 文件夹放在 gitignore 中并且只上传 src 文件,然后每次推送到 master 时以某种方式构建它吗?
If I do the second option, would it just deploy the contents of the /dist folder and not send all the source files to Azure?如果我执行第二个选项,它是否只是部署 /dist 文件夹的内容而不将所有源文件发送到 Azure? That would seem sensible but wouldn't it need some files from the main directory, such as the package.json file so that it knows how to start?
这似乎是明智的,但它不需要主目录中的一些文件,例如 package.json 文件,以便它知道如何开始?
Apologies if this question isn't well formed, I'm not sure what I need to ask.如果这个问题没有很好地形成,我很抱歉,我不确定我需要问什么。 I guess the questions is what is the standard way commit and deploy projects which use a dist directory?
我想问题是提交和部署使用 dist 目录的项目的标准方式是什么?
Here are the scripts in the package.json file.以下是 package.json 文件中的脚本。
"scripts": {
"build": "npm run build-ts && npm run copy-static-assets",
"build-ts": "tsc",
"copy-static-assets": "ts-node copyStaticAssets.ts",
"serve": "node dist/server.js",
"start": "npm run serve",
"watch": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run watch-node\"",
"watch-node": "nodemon dist/server.js",
"watch-ts": "tsc -w"
},
Not answering directly what you want, but in the last 3 years I had so many issues with running NodeJs on Azure that I could only rely on containers to actually have the nodeJs app running smoothly...没有直接回答你想要什么,但在过去的 3 年中,我在 Azure 上运行 NodeJ 时遇到了很多问题,我只能依靠容器来真正让 nodeJs 应用程序顺利运行......
for that, my GitHub action was like this为此,我的 GitHub 动作是这样的
.github/workflows/azure.yml
name: Azure deploy
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
# checkout the repo
- name: 'Checkout GitHub Action'
uses: actions/checkout@master
- name: 'Login via Azure CLI'
uses: azure/login@v1
with:
creds: ${{ secrets.AZURE_CREDENTIALS }}
- uses: azure/docker-login@v1
with:
login-server: my_domain.azurecr.io
username: ${{ secrets.REGISTRY_USERNAME }}
password: ${{ secrets.REGISTRY_PASSWORD }}
- run: |
docker build . -t my_domain.azurecr.io/teamcalendar:latest
docker push my_domain.azurecr.io/teamcalendar:latest
Dockerfile
FROM node:lts-alpine
WORKDIR /usr/app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]
I have done this with the second option you have mentioned, using GitHub Actions to deploy to Azure Web Apps.我已经使用您提到的第二个选项完成了此操作,使用 GitHub 操作部署到 Azure Web 应用程序。
Here are the relevant scripts in package.json
:以下是
package.json
中的相关脚本:
"scripts": {
"build": "tsc --project .",
"build-prod": "npm install && npm run build"
}
Running the build-prod
script will create a dist
folder in your root with the compiled JavaScript.运行
build-prod
脚本将在您的根目录中创建一个dist
文件夹,其中包含已编译的 JavaScript。
To deploy to Azure Web App, you will need a web.config
file in your root folder.要部署到 Azure Web 应用程序,您需要根文件夹中的
web.config
文件。 Below is a standard web.config for Node projects, which I have modified to account for the dist
folder.下面是 Node 项目的标准 web.config,我已对其进行了修改以说明
dist
文件夹。
<?xml version="1.0"?>
<configuration>
<system.webServer>
<handlers>
<!-- indicates that the server.js file is a node.js application to be handled by the iisnode module -->
<add name="iisnode" path="dist/server.js" verb="*" modules="iisnode" />
</handlers>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="dist/server.js"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
To deploy with GitHub Actions, I used the following .yml
file.要使用 GitHub 操作进行部署,我使用了以下
.yml
文件。 This will automatically be created when you set up the GitHub Actions integration for your Azure Web App from the Azure Portal.这将在您为 Azure Web 应用程序从 Z3A5850F142898FBC3677 设置 GitHub 操作集成时自动创建。 I have merely modified the build step to
npm run build-prod
which I specified in package.json
.我只是将构建步骤修改为
npm run build-prod
我在package.json
中指定的。
name: Build and deploy Node.js app to Azure Web App
on:
push:
branches:
- master
workflow_dispatch:
jobs:
build-and-deploy:
runs-on: windows-latest
steps:
- name: 'Checkout Github Action'
uses: actions/checkout@v2
- name: Set up Node.js version
uses: actions/setup-node@v1
with:
node-version: "14.x"
- name: npm install, build
run: npm run build-prod
- name: "Deploy to Azure Web App"
id: deploy-to-webapp
uses: azure/webapps-deploy@v2
with:
app-name: "xxx"
slot-name: "xxx"
publish-profile: ${{ secrets.AzureAppService_PublishProfile_xxxx }}
package: .
This will trigger a build and deploy each time to push to your branch.这将触发每次构建和部署以推送到您的分支。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.