ある程度機能ができてきたので、ローカルテストではなく、サーバーで起動するてすとを行ってみようと思う。
node.jsを動かす必要があるから、しっかりしたレンタルサーバーが必要だな。
あまりお金はないし、ConoHa VPSあたりかな？
月1000円くらいだと趣味にしてはちょっとコスパがなあ・・・とか構想していたんだけど、
よく考えてみると、このアドインってjavascriptをダウンロードするだけで、サーバーサイドでプログラムを動かすわけではないのか。
ということは、ただのhttpサーバーでも可能ということ？！
サーバーの作成
前に忍者ツールズというのでホームページを作ったことがあるので、ちょっと見てみたが、
よく考えるとこれ広告が入るのよな。htmlとかが勝手に書き換えられるのは挙動がすごく不安になるので、広告付きは避けたい。
今日はCopliotに相談してみる
Copilotさん広告が入らないhttpsが使えるサーバーで、料金が安いのを紹介してください。
もちろんです！広告なしでHTTPSが使える、料金が安いおすすめのレンタルサーバーをいくつかご紹介します。以下の選択肢からお好みのものを選んでください。
ロリポップ！: 月額220円でSSL化されており、広告も表示されません。容量は160GBです。 スタードメイン無料サーバー: 広告表示がなく、容量も20GBと他の無料レンタルサーバーより高スペックです。 これらのサーバーは、初めてブログ運営を始める方や一時的なサイトを作成したい方に適しています。独自ドメインを使いたい場合やWordPressを利用したい場合は、選択肢に応じて検討してみてください。
どちらも昔調べたことあるやつだ。妥当な気がする。頼りになるね。
ロリポップのほうがより安いっぽいのでこれを使ってみる。httpsもちゃんと使えるようなので問題ないと思われる。とりあえず10日間無料で使えるようなので、これで実験してみる。
公開の準備
設置場所ができたので、サーバーにアップロードをしてみる。
st_func_addinで
$ npm run build
をしてdistディレクトリにパッケージを作成する。
そういえば、参照してるst-func-tsのフォルダはどうするんだ？と思ったんだけど、できたjavascriptファイルを見ると、依存パッケージの関数も合体させた状態でjsが作られるのね。知らなかった。
ここで、manifest.xmlを変えなきゃいけない。スクリプトの設置場所がlocalhostになっているので、これを書き換える必要があるかな。個所数多くてちょっと面倒だな、と思ったのだが、dist内のmanifets.xmlをみてみると、localhostの部分がhttps://www.contoso.com/になっている。
おや、と思ってフォルダ内を眺めているとwebpack.config.jsの中に、CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATIONとある。なるほどここを書き換えると自動でマニフェストを書き換えてくれるのか。node.jsほんと知らんなあ・・・。
ということで、先ほど作ったサーバーのURLに書き換えて再度ビルドを行う。
デプロイ場所の修正 · st-func/st_func_addin@2ba2800 · GitHub
サーバーへ設置
さて、どうやって設置するかな。FTPクライアントまだ入れてないけど、web上のクライアントだとめんどくさそうだな、と思っていたのだが、
WebDAVという機能が使えるらしい。
これで、ネットワークドライブとして接続して、エクスプローラーでコピペでアップロードできるようだ。なんて簡単。
すごい楽だけどなんでもっと普及してないんだろう？
アドインのテスト
distディレクトリの中身をサーバーへアップロードして、いよいよ試してみる。
Excel Onlineを開き
ホームタブ→アドイン→その他のアドイン→個人用アドイン→マイアドインのアップロード
でmanifest.xmlをアップロードしてみる。
アイコンが出てきた！よし、どうだ？と関数を入れようとしたところ、サジェストが出ない！
嫌な予感をしながら関数を入れてみたが#NAME?になってしまった・・・。
なんでパネルが出ているのに、関数は使えないんだろう？
いろいろ見てるけどわからない。ふと思いついてF12のデベロッパーツールのコンソールを見てみると、エラーを発見。
Access to XMLHttpRequest at 'https://アドレス/functions.json' from origin 'https://excel.officeapps.live.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
なるほどCORSエラーということですか。
htmlとjsは読み込めたけどjsonは読み込めないということなのね。
試しにCORS無視でやってみることとする。
この辺を参考にすると、
$ "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe" --disable-web-security --user-data-dir=C:\\tmp
コマンドで起動したブラウザならCORSエラーを無視できる。
しかしPowerShellで上記コマンドを打ってみたところなぜかエラーが。
コマンドプロンプトだと行けた。この２つの違いいまだによく分からん・・・。
さて、CORSエラーを無視したら無事にアドインは動いた！
のは良いが、困った。せっかく安いサーバーにしたのに、使えないのだろうか。
CORSの設定はサーバーサイドのものだから、こっちでどうこうできないよなあ。
と思って聞いてみることにする。
ロリポップの問い合わせにアクセスするとサポートチャットがあるらしいので聞いてみる。
jsonファイルをサーバーに置いたところ、CORSによってブロックされてしまいました。 jsonファイルを利用することはできないのでしょうか？
すると回答がうたれ始める。むむ、これはChatGPTの予感。
CORS（Cross-Origin Resource Sharing）によるブロックは、異なるオリジン間でのリソース共有を制限するセキュリティ機能です。サーバーに配置したJSONファイルを、別のドメインからJavaScriptで読み込む際にCORSポリシーによってブロックされることがあります。
JSONファイルを利用するためには、サーバー側でCORSポリシーを設定し、アクセスを許可する必要があります。これは、サーバーの設定ファイル（例えば、Apacheの場合は .htaccess ファイル）に適切なヘッダーを追加することで行えます。
例として、全てのオリジンからのアクセスを許可する設定は以下のようになります：
Header set Access-Control-Allow-Origin "" この設定を.htaccessファイルに追加することで、どのドメインからのリクエストでもJSONファイルへのアクセスが許可されます。ただし、""を使用すると全てのドメインからのアクセスを許可するため、セキュリティ上のリスクが高まる可能性があります。そのため、可能であれば特定のドメインのみを指定してアクセスを許可する方が安全です。
Header set Access-Control-Allow-Origin "https://example.com" これらの変更を加えた後、サーバーの設定を再読み込みするか再起動してください。設定が反映され、CORSポリシーによるブロックが解除されるはずです。ご案内した内容で解決されましたか？ご質問がある場合は続けてご質問ください。
それだけでいいの？？
試しに .htaccessを作って
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule>
と書いてやってみたら・・・
動いた！！！
こういうチャットボットのお問い合わせでここまで正確に回答されたのは初めてだ。生成AIほんとすごいな。
全部許可するのもあれなので
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://excel.officeapps.live.com"
</IfModule>
にしておこう。これでも無事動いた。
ロリポップは月200円だから、当初の想定の1/5くらいの価格で運営できそうだ。うれしい誤算。
