在 Azure 上部署 Stripe 支付网关 [英] Deploy Stripe Payment Gateway on Azure

问题描述

经过大量研究，关注了一个 YouTube 视频

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

借助 URL

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

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

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

提前致谢

更新

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

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

<强>2.创建发布管道.

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

下载并检查工件:

4. 检查部署在 Azure 中的 Web 应用.

After a lot of research , followed a YouTube Video https://youtu.be/Ny5vJRfQito and got the payment gateway deployed to Azure.

However while making payments , encountered the below issue stating the payment_intent.js was not found

404 payment_intent.js not found error

Error in console

Below is the screenshot of the file available in the Repository

File available in DevOps Repo

Navigated to the Azure App Service with the help of the URL https://myapp.scm.azurewebsites.net/DebugConsole/?shell=powershell and found that the file was not in the list as shown below

List of files in Azure App Service

Googled a lot , However could not find a solution to this.

Would appreciate if anyone out here could help me with the deployment on Azure and what are the additional steps that need to be taken to fix the issue.

Please let me know if any other details are needed

Thanks in Advance

UPDATE

This is a Next.js Application and the final project files are stored to the OUT folder as next.js doesn't have a build folder as shown below. Also the same files are shown under the www root.

The code runs fine on localhost , Below is the complete folder structure

Project Folder Structure

Below is the screenshot of the build pipeline

Build Pipeline

Below is the out folder

Folder Structure and Files

解决方案

I reproduce the 404 error using your code, and noticed that you use next.js project, which is a little different in Azure between local.

You need two file: server.js and web.config, and modify package.json like below. I test with your code, and it works perfect on my side.

package.json modify.

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

server.js (create this file with the code below:)

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 (create this file with 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> 

Refer to: unable to deploy next js to azure

---

This is the steps I did:

Pre: Add web.config and server.js and modify package.json.

1. Create build pipeline.

2. Create release pipeline.

3. Run build-->trigger publish.

Download and check the artifacts:

4. Check the web app deployed in Azure.

这篇关于在 Azure 上部署 Stripe 支付网关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！