Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/suizer98/nextjsazure
This project involves deploying and hosting a Nextjs app on Azure platform
https://github.com/suizer98/nextjsazure
azure azure-app-service azure-functions azure-pipelines docker microsoft nextjs react sqlserver typescript
Last synced: about 2 months ago
JSON representation
This project involves deploying and hosting a Nextjs app on Azure platform
- Host: GitHub
- URL: https://github.com/suizer98/nextjsazure
- Owner: Suizer98
- Created: 2024-03-18T07:11:18.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-11-03T04:14:01.000Z (about 2 months ago)
- Last Synced: 2024-11-03T05:18:13.751Z (about 2 months ago)
- Topics: azure, azure-app-service, azure-functions, azure-pipelines, docker, microsoft, nextjs, react, sqlserver, typescript
- Language: TypeScript
- Homepage: https://nextjsazure.vercel.app
- Size: 2.23 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nextjs app for Azure use
This is a nextjs project consisting a OpenLayer Map that show beautiful windy style layer. The main goal of
this website is to showcase complete workflow of auto deploy
pipeline using Github Actions to Microsoft Azure platform.
Two approaches were practiced:
1. **IaaS Approach using Azure Virtual Machines**:
- Deploy the application on an Azure Ubuntu Virtual Machine.
- Manage the entire VM, including Docker containers, ports, application dependencies.
- Suitable for scenarios requiring deep customisation and control over the server environment.
2. **PaaS Approach using Azure Web App Service and Azure Container Apps**:
- Deploy the application using Azure Web App Service for managed hosting.
- Utilize Azure Container Instances to deploy the Docker image from Container Registry.
- Simplifies deployment and management with less overhead.
## Tech stacks:
The application is hosted on:
1. Azure Ubuntu Virtual Machine (Production, discontinued)
2. Azure Web App Service (Staging, discontinued): [https://nextjsazure.azurewebsites.net/](https://nextjsazure.azurewebsites.net/)
3. Azure Container App (Staging, discontinued): [http://suizer.bqazfuf4fmdfdjgr.southeastasia.azurecontainer.io/](http://suizer.bqazfuf4fmdfdjgr.southeastasia.azurecontainer.io/)
4. Vercel (dev site with no database connection): [https://nextjsazure.vercel.app/](https://nextjsazure.vercel.app/)
## Available Scripts
In the project directory, you can run:
### Local development
Runs the app in the development mode.
```
npm install
npm run dev
```
Open [http://localhost:8000/](http://localhost:8000/) to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
### Found issues in code style?
To fix all formatting and linting using `prettier`:
```
npm run format
```
### Storing your database password and secretkey
```.env
DATABASE_URL=sqlserver://
SDATABASE_URL=sqlserver:// # Shadow database for prisma migration
```
You can store the env variable somewhere using .env or setting this inside your container or pipeline variables so it don't get exposed
### Database connection
In this project we use Prisma ORM to talk with database:
```
npx prisma init
npx prisma generate
npx prisma migrate dev
```
### Running inside docker container
Must have wsl2 and Docker Desktop installed:
```
docker-compose up --build
docker exec nextjsazure-nextjsazure-1 npx prisma generate
docker exec nextjsazure-nextjsazure-1 npm run format
```
### Steps to setup Azure functions
1. Go to Azure Portal
2. Create a resource group
3. Create a container registry (ACR) under same resource group
4. Create a web service/container instance tied to that ACR
---
You will also need to install Azure Cli to perform:
```
az login
az account set --subscription ""
az ad sp create-for-rbac --name "" --role contributor --scopes /subscriptions/{SubscriptionId}/resourceGroups/
az webapp log tail --name --resource-group # log
```
### Connect to Azure Web App SSH
Follow the Dockerfile configuration, then go to:
https://learn.microsoft.com/en-gb/azure/app-service/configure-custom-container?pivots=container-linux&tabs=debian#enable-ssh
### Problem troubleshooting Azure web app linux host connecting to Azure SQL Server
Many people have been facing issues establishing a connection between Azure linux hosted web app and Azure SQL database server.
Some of the forum discussions: https://serverfault.com/questions/1104918/azure-app-service-to-sql-server-db-connection-fails-with-generic-error-occurred
The alternative way is to use a Azure virtual machine instead.
### How to deploy nextjsazure to Azure Ubuntu VM
If you are looking to deploy this Next.js app on an Azure Ubuntu VM, please refer to the documentation provided [here](docs/README_VM.md).