Implementar Stripe Payment Gateway en Azure

Nov 09 2020

Después de mucha investigación, siguió un video de YouTube https://youtu.be/Ny5vJRfQito y se implementó la pasarela de pago en Azure.

Sin embargo, al realizar los pagos, se encontró el siguiente problema que indica que no se encontró payment_intent.js

Error 404 payment_intent.js no encontrado

Error en consola

A continuación se muestra la captura de pantalla del archivo disponible en el repositorio

Archivo disponible en DevOps Repo

Navegó hasta Azure App Service con la ayuda de la URL https://myapp.scm.azurewebsites.net/DebugConsole/?shell=powershell y descubrió que el archivo no estaba en la lista como se muestra a continuación

Lista de archivos en Azure App Service

Busqué mucho en Google, sin embargo, no pude encontrar una solución a esto.

Agradecería que alguien de aquí pudiera ayudarme con la implementación en Azure y cuáles son los pasos adicionales que se deben tomar para solucionar el problema.

Por favor, avíseme si necesita más detalles.

Gracias por adelantado

ACTUALIZAR

Esta es una aplicación Next.js y los archivos del proyecto final se almacenan en la carpeta OUT ya que next.js no tiene una carpeta de compilación como se muestra a continuación. Además, los mismos archivos se muestran bajo la raíz www.

El código funciona bien en localhost, a continuación se muestra la estructura de carpetas completa

Estructura de carpetas del proyecto

A continuación se muestra la captura de pantalla de la canalización de compilación

Construir canalización

A continuación se muestra la carpeta de salida

Estructura de carpetas y archivos

Respuestas

3 DorisLv Nov 11 2020 at 08:44

Reproduzco el error 404 usando su código y noté que usa el proyecto next.js, que es un poco diferente en Azure entre local.

Necesita dos archivos: server.jsy web.config, y modificar package.jsoncomo se muestra a continuación. Pruebo con tu código y funciona perfecto de mi lado.

package.json modificar.

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

server.js (cree este archivo con el siguiente código :)

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 (cree este archivo con el siguiente código :)

<?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> 

Consulte: no se puede implementar el siguiente js en azure


Estos son los pasos que hice:

Pre: Añadir web.configy server.jsy modificar package.json.

1. Cree una canalización de compilación.

2. Cree un canal de lanzamiento.

3. Ejecute build -> trigger publish.

Descarga y comprueba los artefactos:

  1. Compruebe la aplicación web implementada en Azure.