This is not going to be a detailed post, this is more like a checklist to remember of all the required things in 2023 to have a correct deployment from Github to Azure Web App when I'm working with Next.js framework.
- If I'm using Bicep or terraform for deployment this step is not necessary, otherwise Create a Web App in Azure and configure the deployment with Github.
This will create a Github Deployment file, but I'll like something simpler like this:
name: Build and deploy
on:
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
environment:
name: production
steps:
- uses: actions/checkout@v2
- name: Set up Node.js version
uses: actions/setup-node@v1
with:
node-version: "18.x"
- name: npm install, build, and test
run: |
npm install --force
npm run build
mv ./build/static ./build/standalone/build
mv ./public ./build/standalone
working-directory: ./src
env:
NEXTAUTH_SECRET: ${{ vars.NEXTAUTH_SECRET }}
NEXTAUTH_URL: ${{ vars.NEXTAUTH_URL }}
AZURE_AD_TENANT_ID: ${{ vars.AZURE_AD_TENANT_ID }}
AZURE_AD_CLIENT_ID: ${{ vars.AZURE_AD_CLIENT_ID }}
AZURE_AD_CLIENT_SECRET: ${{ vars.AZURE_AD_CLIENT_SECRET }}
NEXT_PUBLIC_CONNECTION_PROVIDER: ${{ vars.NEXT_PUBLIC_CONNECTION_PROVIDER }}
NEXT_PUBLIC_CONNECTION_PRESENCE: ${{ vars.NEXT_PUBLIC_CONNECTION_PRESENCE }}
NEXT_PUBLIC_CONNECTION_MEETING: ${{ vars.NEXT_PUBLIC_CONNECTION_MEETING }}
- name: "Deploy to Azure Web App"
id: deploy-to-webapp
uses: azure/webapps-deploy@v2
with:
app-name: "teamshousepre"
slot-name: "Production"
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_134181791EE54060B31CE60610FB9DAE }}
package: ./src/build/standalone
Some interesting things here are:
- I'm installing with --force because I sometimes need Next.js canary version.
- After building I am moving
staticandpublicfolders inside standalone folder. - I shared the ENV variables with the deployment (not always needed but depending on how you have created the project)
- I'm uploading the standalone folder.
- Configure Next.js to use standalone and don't use .next folder (this folder is sometimes forgotten during the deployment).
{
reactStrictMode: true,
output: "standalone",
distDir: "build",
}
- This can be changed in the deployment file but is also easy to change the startup command on Azure Settings, we want
node server.js.
- Remember to fill the variables on Azure and Github:
- Still receiveing 500 ERROR?
Then you will need to investigate the Azure Logs
Nothing else on my checklist right now, enjoy if you need this :)
Top comments (0)