Deploy NextJS 13 to Azure App Service with GitHub Action (Efficient Way)
Previously, I posted an article regarding this but the result took a long time because it needed to zip all the files including “node_modules”.
It takes 40–50 minutes in each deployment 😢, but with the new way, it only needs 5–7 minutes.
You can read the previous post to read the details, this article is a short.
Changes
Next Config
If we use a server-side component, we should run the production next.js with next start
. it will require the node_modules
, that is why in the previous post, we compressed the code and uploaded it to Azure.
Next.js has a feature to make it standalone, so we don't need the node_modules and we can use node server.js
to run the next application
Open your next.config.js
const nextConfig = {
reactStrictMode: true,
distDir: "build",
output: "standalone",
...
}
We change the build directory from .next
to build
, and set the output to standalone
so we don't need the node_modules.
Workflow File
We remove the zip method, we directly use the specific.
name: Build and deploy Medium Next.js app to Azure Web App
on:
push:
branches:
- development
paths-ignore:
- "README.md"
- ".husky"
- ".github/**"
- "**/*.csv"
- .env*
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up Node.js version
uses: actions/setup-node@v1
with:
node-version: "18.x"
- name: create env file
env:
NEXT_PUBLIC_API_BASE_URL: ${{ vars.DEV_NEXT_PUBLIC_API_BASE_URL }}
NEXT_PUBLIC_WEB_BASE_URL: ${{ vars.DEV_NEXT_PUBLIC_WEB_BASE_URL }}
NEXT_PUBLIC_FIREBASE_CONFIG: ${{ vars.DEV_NEXT_PUBLIC_FIREBASE_CONFIG }}
run: |
touch .env
echo NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL >> .env
echo NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL >> .env
echo NEXT_PUBLIC_FIREBASE_CONFIG=$NEXT_PUBLIC_FIREBASE_CONFIG >> .env
echo NODE_ENV=development >> .env
- name: npm install, build, and test
run: |
npm install
npm run build
mv ./build/static ./build/standalone/build
mv ./public ./build/standalone
- name: "Deploy to Azure Web App"
id: deploy-to-webapp
uses: azure/webapps-deploy@v2
with:
app-name: "next-medium"
slot-name: "Production"
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_XXXXXXXXXXXXXX }}
package: ./build/standalone
Azure Configuration
Now, we can use node server.js
to run the next application.
Thank you for reading this article! 🚀
Reach me on Linkedin: https://www.linkedin.com/in/didikmulyadi/