Javascript 无法将下一个js部署到azure
我正在尝试将我的NEXTJS应用程序部署到azure。 我创建了一个安装了包含节点的linux操作系统的Web应用程序。 我的Javascript 无法将下一个js部署到azure,javascript,node.js,reactjs,azure,next.js,Javascript,Node.js,Reactjs,Azure,Next.js,我正在尝试将我的NEXTJS应用程序部署到azure。 我创建了一个安装了包含节点的linux操作系统的Web应用程序。 我的package.json如下所示 { "name": "frontend", "version": "1.0.0", "description": "This package contains all necessary depenencies for frontned", "main": "index.js", "scripts": { "d
package.json
如下所示
{
"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"
}
}
我首先创建了一个空的webapp,然后使用部署服务kudu将代码从本地推送到azure
推送到azure时的git日志如下所示
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
所以我猜它部署得很好。
我去了https://node-ax-dev-1212.azurewebsites.net
但什么也没发生
因此,我在实例中使用SSH,然后运行npm run dev
,它立即向我显示了在localhost:3000上运行的项目
所以我写了,但它没有工作,因为它告诉终端,该端口已在使用中,并关闭
我不确定是什么地方出了问题,但我觉得我做的大部分程序都是正确的
我没有添加任何特定的env变量,所以一切都是全新的。
我的目录是这样的
{
"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"
}
}
另外,我还尝试在应用程序设置
runtime
中添加一个启动文件命令npm run dev
,但我认为它不起作用 Azure需要一个web.config文件和一个server.js/index.js作为起点,否则它将无法启动
我建议更改文件夹结构。请参见下面的示例
创建server.js文件并从上述github repo复制信息。
在package.json文件中,将dev build和start替换为
"dev": "node server.js",
"build": "next build",
"start": "node server.js"
现在您可以使用node server.js
运行代码
将其上载到azure时,在根目录中创建一个文件调用web.config
,并在下面添加代码
<?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>
通过调整server.js文件,根据需要添加和更改路由后
将其推送到azure,您的应用程序将开始运行,因为azure现在将运行node server.js并知道在哪里可以找到它。
而且web.config
文件将重写URL,这样您就不必添加yoururl.azure.net:3000
,只需键入URL即可 通过对我的应用程序进行以下更改,我可以让Next.js在Azure Appservices上运行。对Express应用程序和package.json文件进行以下更改
// 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)
})
在package.json文件中,您需要确保有用于postinstall
和start
的脚本。在开始时,您可以添加如下所示的端口变量
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p $PORT",
"postinstall": "next build"
}
我有一篇关于如何在上修复的博文,如果任何人对在Azure App service上部署nextjs有不同的问题,请仔细阅读,你能回答我的问题吗:博文链接正在使用localhost。正确的链接如下;