无法将下一个 js 部署到 azure [英] unable to deploy next js to azure
问题描述
我正在尝试将我的 NEXTJS 应用程序部署到 azure.我创建了一个包含安装了 Node 的 linux 操作系统的 web 应用程序.我的 package.json 看起来像这样.
<代码>{"name": "前端",版本":1.0.0"，"description": "此包包含前端的所有必要依赖项","main": "index.js",脚本":{"dev": "下一个","build": "下一个构建","start": "下一个开始 -p $PORT","test": "echo "Error: no test specified" && exit 1"},"author": "masnad","许可证": "ISC",依赖关系":{"@zeit/next-css": "^1.0.1","下一个": "^8.0.3",反应":^ 16.8.3"，反应域":^16.8.3"}}我首先创建了一个空的 web 应用程序，然后使用了部署服务 kudu，我将我的代码从本地推送到了 azure.
推送到azure时的git日志是这样的
remote: .....................................………………远程:npm WARN 回滚回滚 fsevents@1.2.7 失败(这可能是无害的):ENOTEMPTY:目录不为空，rmdir '/home/site/wwwroot/node_modules/fsevents/node_modules/abbrev'远程:npm WARN 回滚回滚 rc@1.2.8 失败(这可能是无害的):ENOTEMPTY:目录不为空，rmdir '/home/site/wwwroot/node_modules/fsevents/node_modules/rc/node_modules/minimist'偏僻的:远程:>ax-frontend@1.0.0 postinstall/home/site/wwwroot远程:>下一个构建偏僻的:偏僻的: ...............远程:创建优化的生产构建...偏僻的:偏僻的: ...远程:编译成功.偏僻的:远程:┌/远程: ├/_app远程: ├/_document远程:└/_error偏僻的:远程:npm WARN unistore@3.2.1 需要 preact@* 的同级，但没有安装.您必须自己安装对等依赖项.远程:在 139.904 秒内审核了 6645 个包远程:发现 0 个漏洞远程:npm WARN ax-frontend@1.0.0 没有存储库字段.偏僻的:远程:npm WARN 可选跳过可选依赖:fsevents@1.2.7 (node_modules/fsevents):远程:npm 警告 notsup 跳过可选依赖:fsevents@1.2.7 不受支持的平台:想要 {"os":"darwin","arch":"any"}(当前:{"os":"linux","arch":"x64"})偏僻的:偏僻的:远程:>ax-frontend@1.0.0 构建/home/site/wwwroot远程:>下一个构建偏僻的:偏僻的: .........远程:创建优化的生产构建...偏僻的:偏僻的: ...远程:编译成功.偏僻的:远程:┌/远程: ├/_app远程: ├/_document远程:└/_error偏僻的:偏僻的:远程:完成.远程:运行部署后命令...远程:部署成功.远程:应用程序容器将在 10 秒内开始重新启动.到 https://node-ax-dev.scm.azurewebsites.net:443/node-ax-dev.gitec4d5ad..dcadc02 开发 ->掌握所以我猜它部署得很好.我去了 https://node-ax-dev-1212.azurewebsites.net 但什么也没发生.
所以我在实例中通过 SSH 连接，然后运行 npm run dev，它立即向我展示了在 localhost:3000 上运行的项目.
所以我写了
P.S 我还尝试在应用程序设置 runtime 中添加一个启动文件命令 npm run dev 但我认为它不起作用.
Azure 需要一个 web.config 文件和一个 server.js/index.js 作为起点，否则它将无法启动.
我建议更改您的文件夹结构.看下面的例子https://github.com/zeit/next.js/tree/master/examples/custom-server
创建 server.js 文件并从上面提到的 github repo 中复制信息.在 package.json 文件中，将 dev build and start 替换为
"dev": "node server.js","build": "下一个构建",开始":节点 server.js"现在您可以使用 node server.js 来运行您的代码.
在将其上传到 azure 时，在您的根目录中创建一个文件调用 web.config 并添加以下代码.
<webSocket enabled="false"/><处理程序><!-- 表示server.js文件是一个由iisnode模块处理的node.js站点--><add name="iisnode" path="server.js" verb="*" modules="iisnode"/></处理程序><重写><规则><!-- 不要干扰节点检查器调试的请求--><rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true"><match url="^server.js/debug[/]?"/></规则><!-- 首先我们考虑传入的 URL 是否匹配/public 文件夹中的物理文件 --><规则名称="静态内容"><action type="Rewrite" url="public{REQUEST_URI}"/></规则><!-- 所有其他 URL 都映射到 node.js 站点入口点 --><规则名称="动态内容"><条件><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/></条件><action type="重写" url="server.js"/></规则></规则></rewrite><!-- 'bin'目录在node.js中没有特殊意义，app可以放在里面--><安全><请求过滤><hiddenSegments><remove segment="bin"/></hiddenSegments></requestFiltering></安全><!-- 确保错误响应保持不变--><httpErrors existingResponse="PassThrough"/><!--您可以使用以下选项控制 Node 在 IIS 中的托管方式:*watchedFiles:分号分隔的文件列表，将监视更改以重新启动服务器* node_env: 将作为 NODE_ENV 环境变量传播到节点* debuggingEnabled - 控制是否启用内置调试器有关选项的完整列表，请参阅 https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config--><!--<iisnode watchedFiles="web.config;*.js"/>--></system.webServer></配置>在您根据需要通过调整 server.js 文件添加和更改路由之后.
将其推送到 azure，您的应用程序将开始运行，因为 azure 现在将运行 node server.js 并知道在哪里可以找到它.而且 web.config 文件将重写 URL，因此您不必添加 yoururl.azure.net:3000 您只需输入 URL 即可将工作.
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.
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.
这篇关于无法将下一个 js 部署到 azure的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
