iTranslated by AI
Deploying Web Apps with Azure Static Web Apps (PREVIEW)
I tried deploying a simple web application that calls the text sentiment analysis (positive/negative judgment) tool I was playing with late last year, using Azure Static Web Apps.
↓ Check out the previous article on text sentiment analysis here ↓
What I Built
- https://calm-bay-09fad7000.azurestaticapps.net/
- I've made Google login mandatory because I'm afraid of my Azure billing or the free tier being exhausted.
- It's "loose security" that anyone can use as long as they log in with Google.
- This authentication mechanism can be easily added using the features of Azure Static Web Apps.
- When you enter text into the input, it displays the JSON result of running Azure Text Analytics in the output.
A Rough Explanation of How to Build It
Creating Azure Static Web Apps (PREVIEW) Resources
Preparing the GitHub Repository
Azure Static Web Apps is a service that integrates with GitHub to automatically deploy your web app onto Azure. Therefore, first, you create a GitHub repository.
You can build the environment from scratch yourself, but since Azure provides templates, I built it based on one of those this time.
When actually trying it out, it's best to read the official documentation.
So, I created it.
Creating Azure Static Web Apps from the Console
It seems you can also create it from VSCode, but I did it through the console.
Since specifying a GitHub repository is mandatory, you need to create the GitHub repository beforehand.
When creating the resource, GitHub Actions settings are also generated.
If everything goes well, it will be deployed automatically.
Creating the API
By creating an api directory (the directory specified when creating the resource) directly under the repository, you can place APIs within it.
There's almost no documentation on this part, but in short, it's Azure Functions, so if you're familiar with Azure Functions, you should be able to manage.
API Environment Variable Settings
You can configure environment variables for the API under Settings -> Configuration.
In this case, since the Text Analytics key cannot be embedded in the source code for security reasons, I configured it here.
I also set APPINSIGHTS_INSTRUMENTATIONKEY. This will be explained in the next section.
API Log Settings
By default, API logs cannot be seen in Azure Static Web Apps.
Isn't that just terrible?
To view the logs, you need to create an Application Insights resource yourself.
Once created, copy the instrumentation key and set it to APPINSIGHTS_INSTRUMENTATIONKEY, which appeared in the previous section.
Now you can see the API logs in Application Insights.
Setting up Authentication and Authorization
Since I'm afraid of unlimited usage, I made Google authentication mandatory.
By writing the settings appropriately in public/routes.json, you can implement authentication and authorization settings.
I have written it like this for this project.
For more details, please read the official manual.
Finally
Azure Static Web Apps makes deployment very easy because it integrates with GitHub.
In particular, I like that it automatically creates a staging environment when you submit a pull request, although I didn't include that explanation in this article.
On the other hand, since it is still in preview, I get the impression that its features are not yet sufficient. Especially regarding the API, both information and functionality feel a bit lacking.
For now, it's convenient for use during development, but I feel it might still be tough to use for production operations.
Also, if you don't have a specific preference for Azure, I find myself thinking, "Wouldn't AWS Amplify be just as good?"
Discussion