さくらのVPSでnode.jsの常駐アプリを実装したいです。テスト環境からのコードの書き換え方をご教示いただきたいです。

Question

前提・実現したいこと

当方node.jsやサーバー関連について勉強中の初心者です。表題についても調べてはいるものの、どこから手をつけたらいいのかすらわからない状態です。
素人質問で申し訳ございませんが、参考サイトなども教えていただけたらとても助かります。どうぞよろしくお願いいたします。

https://qiita.com/zaburo/items/7d4de7723b6d2445f356

こちらの記事を参考にして、stripeを導入したサイトを作成したいと思っております。
記事内のコードをほぼそのまま使用させていただき、ローカルホストでの実装には成功したのですが、本番環境（さくらのVPS）で実装するにあたってのコードの書き換え方がわかりません。
ご指導いただけないでしょうか。

発生している問題・エラーメッセージ

参考サイト内のコードはローカルホストでの実装用なので、本番用にするためにはクライアント側のCheckoutForm.jsとサーバ側のindex.jsを書き換える必要があると思うのですが、書き換え方がわかりません。

ここを書き換える必要があるのではと思っている箇所は以下になります。
クライアント側 CheckoutForm.js

class CheckoutForm extends React.Component {

    handlePayment = async (values) => {

        // alert(JSON.stringify(values));

        const headers = new Headers();
        headers.set('Content-type', 'application/json');
        // headers.set('Access-Control-Allow-Origin', '*');

        //paymentIntentの作成を（ローカルサーバ経由で）リクエスト
        const createRes = await fetch('http://localhost:9000/createPaymentIntent', {
            method: 'POST',
            headers: headers,
            body: JSON.stringify({ amount: values.amount, username: values.username })
        })

サーバ側 index.js

// 本番用keyに書き換える
const stripe = require("stripe")("sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
...
app.listen(9000, () => console.log("Listening on port 9000"));

試したこと

ここからすでに間違っていたら教えてください。

①node.jsを置くために、server.mysite.comというサブドメインを取得しました。

②/var/www/html/mysite　が現在のドキュメントルートですが、
/var/www/html/mysite-server　をサブドメインのドキュメントルートにするために、
/etc/httpd/conf/httpd.confファイルに以下を加えました。

（本題とは関係ありませんが、試しにmysite-serverフォルダにindex.htmlを置いたところ、
https://server.mysite.com/mysite-serverに表示されました。これってドキュメントルート設定が失敗しているってことですよね…）

    355 <VirtualHost *:80>
    356   ServerName mysite.com
    357   DirectoryIndex index.html index.php
    358   AddDefaultCharset UTF-8
    359   DocumentRoot /var/www/html/mysite
    360   <Directory "/var/www/html/mysite">
    361     Require all granted
    362   </Directory>
    363 </VirtualHost>
    364 
    365 <VirtualHost *:80>
    366   ServerName server.mysite.com
    367   DirectoryIndex index.html index.php
    368   AddDefaultCharset UTF-8
    369   DocumentRoot /var/www/html/mysite-server
    370   <Directory "/var/www/html/mysite-server">
    371     Require all granted
    372   </Directory>
    373 </VirtualHost>

③rootでnode.jsをインストールし、
mysite-serverフォルダに、使用するモジュール（express, cors, body-parser, stripe）をインストールしました。

④参考記事内のサーバ側のindex.jsを、mysite-serverフォルダに置きました。

ここからどうすればいいのか見当もつかず…。
ご指導いただけたら嬉しいです。どうぞよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

CentOS 7 x86_64
Apache

Answer 1

少なくともサーバー側は起動しなければいけないのでnodejs.org:初めてのwebサーバーを参考にコマンド打ちましょう

質問者の状態でドキュメントルートに配置するだけで動かせるのはクライアント側jsだけです

Comments

[退会済みユーザー]

ご回答ありがとうございます。
サーバーは node index.js コマンドを打って起動し、常時起動させたい場合は常駐化処理をする、であってますか？そこまでたどり着くまで長そうです…。
参考サイトまでありがとうございます。拝見してみます。

[hentaiman]

試験的に動かし続けるだけなら
nohup 起動する為のコマンド &
でも出来ますよ
止める時はpsで該当のプロセス見てkillしましょう

[退会済みユーザー]

ありがとうございます。教えていただいたコマンドについて調べてみます。

載せていただいたドキュメントのhostnameをVPSのIPアドレス、portを任意のポート（firewallで開放済み）に置き換えて、サーバ側index.jsのapp.listenを書き換えてみました。クライアント側CheckoutForm.jsのfetchもそれに合わせて書き換えました。
しかしnet::ERR_CONNECTION_TIMED_OUTが出てしまいました…。

[hentaiman]

公式サンプルをコピペしてサーバーの設定が正しいのにエラーになると言っているのなら理由はサッパリ分かりません。
ログ出力しながら動作確認しましょう。

そうでないなら
・サーバー設定の見直し
・サーバープログラムの見直し
・ログを確認しながらの修正
ぐらいしか出来る事はないでしょう
それと最初はURL直打ちでサーバーの確認をしましょう

[退会済みユーザー]

わかりづらくて申し訳ありません。
もともと質問本文内の参考記事のnode.jsアプリをローカル環境で動かすことには成功しております。公式サンプルのコピペも試したところ、ローカル環境では動かせました。

それを本番環境（さくらVPS）で動かすためにコードを書き換える必要があると思うのですが、その書き換え方がわかりません。
公式サンプルのコピペをそのままVPS上で動かしてみても「接続が拒否されました」エラーが出てしまい、hostname, portを私のVPSの環境に合わせて書き換えてみても、ずっと読み込み中になってしまい接続できません。

私の書き換え方がおかしいのか、VPS側の設定をいじればいいのか、それすらもわからないので、ご教示いただけないかと思い質問した次第です…。

[hentaiman]

サンプルコードhostnameはログ出してるだけなのでどうでも良いですが、ローカルで動作するコードがVPSで動かないという事はVPSの設定が原因ですよ。
ファイヤーウォールで開放済みってのがVPS上のファイヤーウォールを指しているんなら、もう一個罠（https://vps.sakura.ad.jp/feature/packetfilter.html）に引っかかってるんでしょう。
これも開放しましょう。

[退会済みユーザー]

まさしくその通りでした！さくらVPSのパケットフィルタを無効にしたら、VPS上でも動きました。ありがとうございます！

ということは、stripeの/createPaymentIntentはhttpsでなければいけないので、
サーバ側index.jsのapp.listenをhttpsでできるようにして（例えばhttps://0.0.0.0:1000）、
クライアント側CheckoutForm.jsで https://0.0.0.0:1000/createPaymentIntent をfetchすればいいのでしょうか？

fsモジュールを読み込んで、LetsEncryptの導入が済んでいるmysite.comを使って（？）httpsサーバを作成する、というのはやってみたのですが、net::ERR_CERT_COMMON_NAME_INVALIDが出て失敗しました。（参考サイト：https://qiita.com/mkoku/items/3537d9cc7d4c029d886b）

サブドメインserver.mysite.comもLetsEncryptの導入が済んでいるので、そこで/createPaymentIntentのpostをしたらいいのか？と思うのですが、どうやってlistenすればいいのでしょうか。調べていますがよくわからず…

[hentaiman]

よく分からないのは技術不足なので仕方ないですね。最初はみんなそうです、自分もそうでした。それも全部独力で調べて出来るようになると思いますよ。

まあ自分サポートじゃないんで、そこまで手取り足取り求めるなら有償サポートでも探してくださいね
teratailは営業的な事NGなので自分からは何も言えませんが

とりあえず質問解決したと思うので解決済みとし、一旦自力で調査して出来るところまで試行錯誤し、質問箇所をある程度絞れたらまた改めて丁寧な内容で質問してください。

[退会済みユーザー]

解決はできていませんが、回答者様のアドバイスのおかげで「わからないことが何か」が少し見えてきたので、ご指摘の通り質問箇所をもっと絞ってピンポイントで質問を投稿してみようと思います。
親身に付き合ってくださりありがとうございました。

[hentaiman]

？？？
元々サーバーとして動かす事すら出来なかったものを教えてあげて解決したわけで、今は別の問題にすり替わっているだけですよね？
これで解決じゃないのなら多分他の回答者も誰も回答しませんよ、なぜならQの部分が不明瞭なんだから。

[退会済みユーザー]

仰る通り、無知すぎるあまりにQの部分が不明瞭だったと思います。質問箇所を絞ってから改めて質問を投稿しようと思います。
こちらの質問は締めさせていただきます。本当にありがとうございました。

[hentaiman]

とりあえず質問者が前に進むために今やる事は、既にコメントにも書いたけどまずはクライアント側javascriptなんて使わずにURL直打ちでサーバープログラムの動作チェック、そして並行してログを出力しながら動作の確認です。
サーバー側の開発ではブラウザのエラーではなくサーバーの吐き出すエラーなどのログを元に作業します。

[退会済みユーザー]

ごめんなさい、サイト自体（reactで作っています）はVPSを用いて実装できていて、新たにNode.jsを導入するところでつまずいています。
node index.js コマンドを実行しても、Server running at http://... と言ってくれるか言ってくれないかで、エラーは吐き出してくれません。
仰っていることはそういうことではなくでしょうか？URL直打ちでサーバープログラムの動作チェックというのがよくわからなくて…ごめんなさい。

[hentaiman]

そりゃlisten状態になりましたよって事で、URLにアクセスされた時にリクエストを受け付けるようになりましたよっていうメッセージが表示されてるだけです
&つけずにサーバープログラムを実行しているのならエラーが起きていれば標準出力（コンソール）にエラーが表示されているはずです。
で、表示も無く正常動作しないのなら、それよりも前（サーバープログラムにアクセスされるよりも前）の段階でエラーが起きているか、サーバープログラム内でエラーが起きているが握り潰されている状態か、処理が止まっているか、です。

> URL直打ちでサーバープログラムの動作チェックというのがよくわからなくて

ブラウザにURLを直接開くでもなんでも、とにかく直接アクセスしてみる事

[退会済みユーザー]

公式サンプルを試した際に、hello wolrdが問題なく表示されているかなどを確かめにいくことでしょうか。それなら毎回URL直打ちで確認しております。

自分のコードを node index.js コマンドで起動したところ、URLを見に行ったらCannot GET /が表示されていました（自分のコードの場合、これは正常な動作なのかな？と思っていました）
コンソールにもエラーは表示されていないので、この場合はサーバー側は問題なく動作していて、クライアント側のCheckoutForm.jsの方で失敗していると考えて良いのでしょうか。

[hentaiman]

サーバー側のコードが全く分からないので何とも言えないけど、サーバーが待ち受けてるだけで何にも処理してないんでしょ
その辺はぐーぐる先生に聞けば大量に情報出てくるから調べてください

ちなみにサーバー側の処理が正常な場合、

> この場合はサーバー側は問題なく動作していて、クライアント側のCheckoutForm.jsの方で失敗していると考えて良いのでしょうか。

このような判断が付けられない状態になる事はなく、明確にクライアント側の問題だと判断出来るはずです。どちらが問題か分からない時はサーバー側のプログラムに問題があると考えれば良いです。

[退会済みユーザー]

わかりました。調べてみます。サーバ側の元コードは以下になります。
サーバ側 index.js
```
const app = require("express")();
const stripe = require("stripe")("sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
const cors = require('cors');
const bodyParser = require('body-parser');

app.use(require("body-parser").text());
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/createPaymentIntent', async (req, res) => {

const result = await stripe.paymentIntents.create({
amount: req.body.amount,
currency: 'jpy',
description: '●●商店決済', //option
metadata: { username: req.body.username, tranId: '11111' } //option
});

console.log(result);
res.json(result);

});

app.listen(9000, () => console.log("Listening on port 9000"));
```
ひとつだけ教えていただきたいのですが、postする先を自サイトのサブドメイン（server.mysite.com）にして、自サイト（mysite.com）内からfetchするというのは、方向性として正しいのでしょうか？
そもそもそこから間違っていますか？

[hentaiman]

規模とインフラ設計次第です。
CORS制約を受けてまでドメインを分ける強い理由が無いなら同じドメインでやるものです。

[退会済みユーザー]

ありがとうございます。CORSエラーも起こっていてどうしたものかと思っていたのですが、同じドメインでもできるのですね。サブドメインのことは忘れて同じドメインで実装できるよう頑張ってみます。
引き続き勉強を続け、どうしても行き詰まったら質問を投稿しようと思います。本当にありがとうございました。

[退会済みユーザー]

Apache内のメインドメインに関するletsencryptファイルを読み込ませ、createServerしてhttpsサーバーを作成したところ、メインドメインのportにpostすることに成功し、自サイト内からも無事にfetchすることができました！
本当に助かりました。たくさんのご助言をありがとうございました。