在 Azure 上部署 Stripe 支付网关

Posted 2023-02-19

【中文标题】在 Azure 上部署 Stripe 支付网关

【英文标题】：Deploy Stripe Payment Gateway on Azure

【发布时间】：2021-02-21 18:38:47

【问题描述】：

经过大量研究，跟随 YouTube 视频https://youtu.be/Ny5vJRfQito 并将支付网关部署到 Azure。

但是在付款时，遇到以下问题，说明未找到 payment_intent.js

404 payment_intent.js not found error

Error in console

以下是存储库中可用文件的屏幕截图

File available in DevOps Repo

借助URLhttps://myapp.scm.azurewebsites.net/DebugConsole/?shell=powershell导航到Azure App Service，发现该文件不在如下所示列表中

List of files in Azure App Service

谷歌了很多，但是找不到解决办法。

如果有人可以帮助我在 Azure 上进行部署，以及需要采取哪些其他步骤来解决此问题，我将不胜感激。

如果需要任何其他详细信息，请告诉我

提前致谢

更新

这是一个 Next.js 应用程序，最终项目文件存储在 OUT 文件夹中，因为 next.js 没有如下所示的构建文件夹。同样的文件也显示在 www 根目录下。

代码在 localhost 上运行良好，下面是完整的文件夹结构

Project Folder Structure

下面是构建管道的截图

Build Pipeline

下面是out文件夹

Folder Structure and Files

【问题讨论】：

可以在deploy任务日志中查看js文件是否部署，查看js文件是否包含在部署的zip包中。

@HughLin-MSFT 感谢您的回复.. 作为 Azure DevOps 的新手，我不确定我是否完全理解您的建议，如果您能详细说明，将不胜感激

【参考方案1】：

我使用您的代码重现了 404 错误，并注意到您使用的是 next.js 项目，这在 Azure 和本地之间略有不同。

您需要两个文件：server.js 和 web.config，并修改 package.json，如下所示。我用你的代码进行了测试，它对我来说很完美。

package.json修改。

"scripts": 
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js"

server.js（使用以下代码创建此文件：）

const  createServer  = require('http')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next( dev )
const handle = app.getRequestHandler()

app.prepare().then(() => 
  createServer((req, res) => 
    const parsedUrl = new URL(req.url, 'http://w.w')
    const  pathname, query  = parsedUrl

    if (pathname === '/a') 
      app.render(req, res, '/a', query)
     else if (pathname === '/b') 
      app.render(req, res, '/b', query)
     else 
      handle(req, res, parsedUrl)
    
  ).listen(port, (err) => 
    if (err) throw err
    console.log(`> Ready on http://localhost:$port`)
  )
)

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="publicREQUEST_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> 

参考：unable to deploy next js to azure

---

这是我做的步骤：

前置：添加web.config和server.js并修改package.json。

1.创建构建管道。

2。创建发布管道。

3.运行构建-->触发发布。

下载并检查工件：

检查部署在 Azure 中的 Web 应用程序。

【讨论】：

感谢您抽出宝贵的时间来帮助我 :) 我已经更新了我的答案，如果您需要更多信息，请告诉我，如果您可以从 github.com/tmarek-stripe/demo-react-stripe-js 下载代码，我们将不胜感激看看进展如何

嘿，@Vivek，我用你的 next.js 项目更新了解决方案。如果有帮助，请您接受作为答案吗？

@Doris_Lv ，谢谢你的回答，你能重复你上次为你的 reactjs 示例代码所做的所有步骤吗？

好的，我再重复一遍。这需要一些时间，请稍等。@Vivek

当然...谢谢