はじめに

以下URLを参考に進めました。
https://developer.atlassian.com/cloud/jira/platform/getting-started-with-connect/

公式のままの手順だと上手くいかない、公式手順通りに行うとなると+課金が必要そうだなと感じたためgithubPagesを使ってなんとかお金をかけないで作ってみました！の記録となります！(｡･ω･｡)

ちなみにgithubアカウント持っててある程度githubいじいじ出来る方でないとStep6のところで????になるかと思います、、

以下はgithubPage用に作成したリポジトリです！
https://github.com/sachiko-kame/JIRAAPP-Sachiko-kame

事前に必要環境

お気に入りのIDEまたはテキストエディタ
Node.js（v12.1.0以降） url

↑と書きましたが今回の手順のまま行う+ Step5飛ばす形ならなくても大丈夫です。

必要環境確認

↑と書きましたが今回の手順のまま行う+ Step5飛ばす形ならなくても大丈夫です。

$ node -v
>> v14.16.0

$ npm -v
>> 6.14.11

Step1 サイト作成

以下ログイン

http://go.atlassian.com/cloud-dev
※ タブ等でJIRA開いているとログインできないのでその際は開いているタブを閉じてください。
適当な名前をつけてサイトを作成する (この後の質問は適当にスキップしてください)

その後何選んでもいいのですがとりあえず下のイメージで進みました。

Step2 開発モードを有効にする

Step3 必要な設定ファイルの作成

適当にフォルダ作成 atlassian-connect.jsonファイル作成して以下記述jsonをそのまま記述

{
     "name": "Hello World",
     "description": "Atlassian Connect app",
     "key": "com.example.myapp",
     "baseUrl": "https://<placeholder-url>",
     "vendor": {
         "name": "Example, Inc.",
         "url": "http://example.com"
     },
     "authentication": {
         "type": "none"
     },
     "apiVersion": 1,
     "modules": {
         "generalPages": [
             {
                 "url": "/helloworld.html",
                 "key": "hello-world",
                 "location": "system.top.navigation.bar",
                 "name": {
                     "value": "Greeting"
                 }
             }
         ]
     }
}

参考イメージ

Step4 サンプルインターフェースの作成

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://unpkg.com/@atlaskit/css-reset@2.0.0/dist/bundle.css" media="all">
        <script src="https://connect-cdn.atl-paas.net/all.js" async></script>
    </head>
    <body>
        <section id="content" class="ac-content">
            <h1>Hello World</h1>
        </section>
    </body>
</html>

参考イメージ

Step5 ローカルウェブサーバーでアプリをホストする (今回の場合は開発ようにということで)

npmでhttp-serverをインストール

npm install http-server -g

『atlassian-connect.json、helloworld.html』がある箇所で以下のコマンドを打ちポート8000でサーバー起動

http-server -p 8000

http://127.0.0.1:8000/ 開き以下のようになっていればOK

Step6 アプリファイルをインターネットで利用できるようにする

ここから公式ページとは異なる方法で行っていきます！
理由→公開したURLの固定をしないといけないが、お金がかかるからです。
ここで使うのが『GitHub Pages』

適当にgithubのパブリックブランチ作成、そこに今回作成したファイルを入れる。以下参考URL

作ったもの
https://github.com/sachiko-kame/JIRAAPP-Sachiko-kame

githubの設定のGithubPageでbranchをmainにしてsaveする。以下参考　urlが表示されるのでアクセスしてみても可能

先ほど作成したURLをbaseUrlに記述。

参考
https://sachiko-kame.github.io/JIRAAPP-Sachiko-kame/atlassian-connect.json

記述したURLの後ろに /atlassian-connect.jsonをつけたURLを記録しておく

以下サンプルです

https://sachiko-kame.github.io/JIRAAPP-Sachiko-kame/atlassian-connect.json

Step7 アプリをインストールしてテストする

Step2で開いたURLをリロードして『アプリのアップロード』リンクが出てきたらタップ

先ほど記録したURLを入れてアップロードボタンタップ
うまくいくと以下のようにアプリがインストール(アプリタップでみれます)されているのでクリックしてアプリ実行します　表示確認できればoK(中身変えてます、、すみません。)

困ったとき！

一度間違えてアプリをあげてしまうと記録が残ってしまうので、再度アップロードする際は『atlassian-connect.json』の『value』部分を変更してください。

atlassian-connect.json

"name": {
     "value": "Greeting"
}

今回無料の固定アドレスがほしかったのでgithubを作成して行ったので手順通り行ってくれれば問題ないのですが公式の場合そのまま使うと固定アドレスにならないもの『ngrok』を使用するように進めています。固定にするためには課金が必要で設定が必要そうです。
『ngrok』を使う場合、手順は作成したファイルがあるところでhttp-server -p 8000、他のターミナルの開いて作成したファイルがあるところでngrok http 8000のようにしないとうまくいきません。『http-server』したままで『ngrok http 8000』する必要があるという感じです。

メモ

Jira Cloud platform Developer

githubPages使ってJIRAアプリ開発お金かけずに作ってみる(【Hello World】)