I want to deploy my react project on azure cloud. I already deployed it on heroku and there it was very easy to deploy. I just had to do git push heroku master to deploy it on heroku. But I am clueless on how to do it on azure. So I have a bulid directory in my project which gets generated everytime I run gulp command. It has all the build files. Can anyone please guide me on how to proceed to azure?
This is my project structure
There are many options to deploy your app to azure websites/ web app, such as FTP, Local Git Repository, and Visual Studio IDE, etc. I am not a React expert, here for simplicity, I just use create-react-app tool and FileZilla to deploy my React app to Azure Web App. Here are the steps.
Basically, creating and building React app is as simple as
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm run build
Now, the app is ready to be deployed! Let’s go into Azure portal and create a new website that will host our React app.
Enter a unique app service name, a valid name for the resource group and a new service plan. Then click Save.
To enable FTP publishing, click Deployment credentials under the APP DEPLOYMENT menu. Save the credentials and make a note of the user name and password you create.
Next, click on Properties, and copy the FTP HOST NAME and the USER.
Finally, connect to Azure Web app via FileZilla, then upload the entire content of the my-app/build folder created earlier into the /site/wwwroot/ folder on your Azure Website.
Now we can visit the app in a browser via URL: http://aaronreacttest.azurewebsites.net/,
and it should display the default page.
In addition to steps provided by Aaron, I had to add the web.config file with the content below. It is provided by other techies in their blogs and some forums.
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Static Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Related
trying to upload my mobile web application to azure
followed
https://learn.microsoft.com/en-us/azure/app-service/quickstart-nodejs?tabs=windows&pivots=development-environment-vscode
ended up just getting the error unable to handle request HTTP error 500
the web app works locally so i dont know what the issue is
a friend told me it was might be because all webpages in the views folder are .ejs files when they should be HTML.
I have followed the same document which you have provided and able to access the Application without any issues.
Create Node.js Application using the below command.
npx express-generator myExpApp19Dec --view ejs
Navigate to the Application root directory(myExpApp19Dec) and run npm install.
node_modules folder will be created at root of the directory.
Run npm start to start and run the application in local.
Open the Application from VSCode.
Steps to deploy Web App to Azure App Service
Sign into Azure => Click on Azure Icon => Select your Subscription = > App Services.
web app name - ExpressApp19Dec
runtime stack - Node 18 LTS
OS - Windows
Location - East US
Immediately after deployment, when I tried to access the Application, I got the below error.
Added SCM_DO_BUILD_DURING_DEPLOYMENT in Application Setting as suggested in the document.
Navigate to the deployed App folder in VSCode => Your App => Application Settings =>Add New Setting.
We can even add this Application Setting from Azure Portal => App Service => Configuration section. Re-deploy option can be excluded when we add Application Setting from Azure Portal.
Re-deploy the Application to get the latest changes.
Make sure web.config file is created at the root directory of the deployed Application in KUDU Console.
Path to KUDU Console -
https://YourAppServiceName.scm.azurewebsites.net/DebugConsole
My autogeneratedweb.config file
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<webSocket enabled="false" />
<handlers>
<add name="iisnode" path="bin/www" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^bin/www\/debug[\/]?" />
</rule>
<rule name="StaticContent">
<action type="Rewrite" url="public{PATH_INFO}"/>
</rule>
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="bin/www"/>
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>
Now Iam able to access the Application.
all webpages in the views folder are .ejs files when they should be HTML.
In VSCode => root folder => app.js file,
app.set('view engine', 'ejs');
This code helps to detect the ejs files. The issue is not with the ejs files.
EJS is an Embedded JavaScript template which is used by Node JS Application.
We are seeing some 404 logs coming from a bot in Azure always On. It trigged every 5min. Our health check is not in the root directory.
We are using Docker image for this, NodeJs 14.x. In documentation, they say to use web.config to redirect some urls but I'm not sure this will work.
<rule name="Redirect AlwaysOn requests from root to custom url" stopProcessing="true">
<match url="^$" />
<conditions>
<add input="{HTTP_USER_AGENT}" pattern="^AlwaysOn$" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/status" logRewrittenUrl="true" redirectType="Permanent"/>
</rule>
and not sure where to put this file in the container. Here's docker file
FROM node:15.0.1-alpine3.10
WORKDIR /usr/src/app
RUN mkdir node_modules
RUN mkdir dist
COPY node_modules node_modules
COPY dist dist
COPY apps/api/.docker/sshd_config /etc/ssh/
COPY apps/api/.docker/init.sh /usr/local/bin/
RUN chmod u+x /usr/local/bin/init.sh
ENTRYPOINT ["/usr/local/bin/init.sh"]
404 logs coming from a bot in Azure always On.
Issue can be fixed by rewriting the Always on path.
After a cold start of your application, AlwaysOn will send a request to the ROOT of your application “/”. Whatever file is delivered when a request is made to, / is the one which will be warmed up, it will fail because the root doesn’t exist.
Make AlwaysOn to warmup a specific page instead of the root, implement URL Rewrite rule.
<?xml version="1.0" encoding="UTF-8" standalone="no">
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Rewrite AlwaysOn" stopProcessing="true">
<match url="^$" />
<conditions>
<add input="{HTTP_USER_AGENT}" pattern="^AlwaysOn$" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/status" logRewrittenUrl="true" redirectType="Permanent"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
web.config file needs to be added to the node app at the root
If your app has a server.js or app.js file in your Node.js project, the web.config file should be in the same directory.
If you are using Visual Studio Code , then Put web.config file in /public folder, It will then be copied over to /dist folder during build.
I have created the config file in public folder, After running npm run build , web.config file is copied to dist folder.
To create web.config, Right click on the public folder
Add new file, name it as web.config and add the above mentioned code snippet and save.
Go to Azure portal, your Web App =>Advanced Tools=>KUDU - Debug Console =>CMD => site=>wwwroot , check if web.config file exists or not.
If you are using Visual Studio, then select Azure Node.js Express template to craete the Web App, then web.config will be generated automatically.You can edit the settings directly.
I've spent the past 2 days trying to figure out how to deploy my web app using Azure DevOps but nothing shows up. I used FileZila to see if the files generated by the build is uploading and all the files are there under the wwwroot folder. I tried manually uploading the files using FileZilla too. At this point I'm getting really frustrated because I've tried everything I found online to deploy the app. DevOps works perfectly fine, the part that isn't working is my web app actually showing up when I go to the URL.
I followed all the tutorials I could find.
No idea why this is asking me to deploy my code when the code is clearly deployed :/
Failed to reproduce your issue,you could follow my working steps as below:
1.Import repository,I used the git url from this document:https://github.com/MicrosoftDocs/pipelines-javascript
2.Create Build Pipeline.
3.Run the Build process.
4.Release the project and choose Nodejs Web APP.
5.Choosing the azure web app service in your subscription.
6.Navigate to your project url.
7.My files in the /wwwroot directory.
And web.config file as below:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<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="server.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>
You could check any differences between your steps and mine.Any concern,please let me know.
The reason I was having this issue was that I was trying to deploy to a Linux web app in Azure.
Unfortunately, I couldn't find a way around getting the deployment to Linux working, but as soon as I switched the app to windows based app service plan the app worked instantly.
If you're deploying react app to azure app service linux instance via Azure devops, then be sure to add following 'Startup command' to the azure app service deployment task:
pm2 serve /home/site/wwwroot --no-daemon --spa
Azure App Service Linux uses Nginx for web server, and has pm2
installed. Know more about pm2 here ->
https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/
To automatically redirect all queries to the index.html use the --spa
option.
After devops run, your azure app service Configuration -> General Settings, will look like:
I had a Django web app (Python 2.7) project working and running on Azure App services.
I upgraded the Python to Python 3.6 (64 bit), after making sure the project is working on my local host, I deployed it to Azure.
After deployment I am getting this error:
The page cannot be displayed because an internal server error has occurred
Searched the internet and I installed the Python 3.6 extension.
In the log streamer I can see that the error is:
"ModuleNotFoundError: No module named 'django'"
I compared the new deployment to my old one and the only difference I can see is that in the new deployment, I can't see the virtual env.
Do I need to install the virtual env by myself? and if so, what will happen when I will updated my project and add libraries every time I will to do it manually ?
Based on the error you provided: ModuleNotFoundError: No module named 'django', it seems you have issue with module package installing. You could refer to my work steps and check if you missed something.
Step 1: Follow the official tutorial to create your azure python web app.
Step 2: Add Python extension.
Of course,you could choose your desired version.
Step 3: Add web.config file and deploy your web app.
<configuration>
<appSettings>
<add key="WSGI_HANDLER" value="<your project name>.wsgi.application"/>
<add key="PYTHONPATH" value="D:\home\site\wwwroot"/>
<add key="WSGI_LOG" value="D:\home\LogFiles\wfastcgi.log"/>
</appSettings>
<system.webServer>
<handlers>
<add name="PythonHandler" path="handler.fcgi" verb="*" modules="FastCgiModule" scriptProcessor="D:\home\python361x64\python.exe|D:\home\python361x64\wfastcgi.py" resourceType="Unspecified" requireAccess="Script"/>
</handlers>
<rewrite>
<rules>
<rule name="Static Files" stopProcessing="true">
<conditions>
<add input="true" pattern="false" />
</conditions>
</rule>
<rule name="Configure Python" stopProcessing="true">
<match url="(.*)" ignoreCase="false" />
<conditions>
<add input="{REQUEST_URI}" pattern="^/static/.*" ignoreCase="true" negate="true" />
</conditions>
<action type="Rewrite" url="handler.fcgi/{R:1}" appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Step 4: Install pip plugin in your python extension environment.
Switch to the Kudu CMD and commands cd Python361x64 and touch get-pip.py and copy the content of the url https://bootstrap.pypa.io/get-pip.py into the get-pip.py via Edit button, then run python get-pip.py to install the pip tool.
Step 5: Install django module and other modules you want to use.
Above two steps please refer to my previous case:pyodbc on Azure
Just for summary here, it is sorted out by changing the <add key="WSGI_HANDLER" value="<your project name>.wsgi.application"/> to django.core.wsgi.get_wsgi_application().
I have a node app that has both a react native front end and a node API
I want to be able to just run npm install for both folders and then just have it run the start command "node server" (node/server/index.js) to have the node app running.
But I can't seem to figure out the release tasks to make this happen.
I am using the preview continous delivery that connects to visual studio online
In my opinion, it has nothing to do with continuous delivery. Since Azure App Service runs on Microsoft IIS, you'll need to have an IIS configuration file named web.config and should include the following section to match your requirement:
<handlers>
<add name="iisnode" path="./node/server/index.js" verb="*" modules="iisnode"/>
</handlers>
This indicates that the node/server/index.js file is a node.js site to be handled by the iisnode module.
<rewrite>
<rules>
<!-- 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="./node/server/index.js"/>
</rule>
</rules>
</rewrite>
These rewrite rules determine where your static content and dynamic content should be located in.
For a completed web.config file you can check this post out.