问题
I am trying to deploy my NEXTJS app to azure.
I created a webapplication with a linux OS containing Node installed.
my package.json looks like this.
{
"name": "frontend",
"version": "1.0.0",
"description": "This package contains all necessary depenencies for frontned",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p $PORT",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "masnad",
"license": "ISC",
"dependencies": {
"@zeit/next-css": "^1.0.1",
"next": "^8.0.3",
"react": "^16.8.3",
"react-dom": "^16.8.3"
}
}
I first created an empty webapp and then used deployment service kudu where I pushed my codes from local to azure.
The git log when pushing to azure looks like this
remote: ..............................................................
remote: npm WARN rollback Rolling back fsevents@1.2.7 failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/home/site/wwwroot/node_modules/fsevents/node_modules/abbrev'
remote: npm WARN rollback Rolling back rc@1.2.8 failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/home/site/wwwroot/node_modules/fsevents/node_modules/rc/node_modules/minimist'
remote:
remote: > ax-frontend@1.0.0 postinstall /home/site/wwwroot
remote: > next build
remote:
remote: ...............
remote: Creating an optimized production build ...
remote:
remote: ...
remote: Compiled successfully.
remote:
remote: ┌ /
remote: ├ /_app
remote: ├ /_document
remote: └ /_error
remote:
remote: npm WARN unistore@3.2.1 requires a peer of preact@* but none is installed. You must install peer dependencies yourself.
remote: audited 6645 packages in 139.904s
remote: found 0 vulnerabilities
remote: npm WARN ax-frontend@1.0.0 No repository field.
remote:
remote: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
remote: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
remote:
remote:
remote: > ax-frontend@1.0.0 build /home/site/wwwroot
remote: > next build
remote:
remote: .........
remote: Creating an optimized production build ...
remote:
remote: ...
remote: Compiled successfully.
remote:
remote: ┌ /
remote: ├ /_app
remote: ├ /_document
remote: └ /_error
remote:
remote:
remote: Done.
remote: Running post deployment command(s)...
remote: Deployment successful.
remote: App container will begin restart within 10 seconds.
To https://node-ax-dev.scm.azurewebsites.net:443/node-ax-dev.git
ec4d5ad..dcadc02 development -> master
So I am guessing that it got deployed well.
I went to the https://node-ax-dev-1212.azurewebsites.net but nothing happened.
So I SSH'd inside the instance and then ran npm run dev and it instantly showed me that project running on localhost:3000.
SO I wrote https://node-ax-dev-1212.azurewebsites.net:3000 and yet it did not work as it tells in the terminal that the port is in use already and shuts down.
I am not sure what is wrong but It feels like I did most of the procedure correctly.
I did not add any specific env variables so everything is just plain new. MY directory looks like this.
P.S I also tried to add in the application settings runtime a start up file command npm run dev but I don't think it works.
回答1:
Azure needs a web.config file and also a server.js/index.js as a starting point else it won't be able to start.
I recommend changing your folder structure. See the example below https://github.com/zeit/next.js/tree/master/examples/custom-server
Create the server.js file and copy the information from the above mentioned github repo.
In the package.json file replace the dev build and start to
"dev": "node server.js",
"build": "next build",
"start": "node server.js"
Now you can just use node server.js to run your code.
While uploading it to azure, in your root directory create a file call web.config and add the code 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>
After you have added and made changes to your routes depending on how you need by tweaking the server.js file.
Push it to azure, and your app will start running as azure will now run node server.js and will know where to find it.
And also the web.config file will rewrite the URL so you don't have to add yoururl.azure.net:3000 you can just simply type in the URL and it will work.
回答2:
I was able to get Next.js to run on Azure Appservices by making the following changes to my app. Make the following changes to your Express app and your package.json file.
// server.js
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
// Your app will get the Azure port from the process.enc.PORT
const port = process.env.PORT || 3000;
app
.prepare()
.then(() => {
const server = express()
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(port, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch(ex => {
console.error(ex.stack)
process.exit(1)
})
In you package.json file, you will need to make sure that you have scripts for postinstall and start. In the start you can add a port variable like the following.
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p $PORT",
"postinstall": "next build"
}
I have a blog post on how to fix at http://localhost:8000/blog/running-next-js-on-azure-app-services
来源：https://stackoverflow.com/questions/54908662/unable-to-deploy-next-js-to-azure