githubアクションを介してgithubページでkotlin/jsをホストすること

GitHub Pages あなたのKotlin/JSアプリケーションをホストする簡単な方法です-そして、連続統合サービスGitHub Actions , 簡単にスムーズに開発することができます(および展開!)プロジェクトの経験.記事を読むにどのように構築することができますGithubのCI上のアプリケーションをテストし、あなたのKotlin/JSのWebアプリを無料で公開取得を学ぶ.
このポストでは、新しいコードがリポジトリにプッシュされたり、プル要求を介して追加されるように、Githubのアクションとページを設定する予定です.(プロジェクトを構築し、テストをGithubのサーバーに実行することによって)、そして我々のプロジェクトのメインブランチにプッシュされたコードが自動的に公開されます.
これを達成するには、次のようになります.

Set up a quick Kotlin/JS project

Share its code on GitHub ( Intellij - ideaのGit統合により)

Set up GitHub Actions' workflow YAML

Set up GitHub pages to work with the result of our Actions workflow

あなたがすでに基本を知っているならば、構成セクションにまっすぐスキップしたいですclick here – or find the sample project directly on GitHub

サンプルのKollin / JSアプリケーションの設定

プロジェクトを展開するには、まずプロジェクトが必要です.このデモの場合は、プロジェクトウィザードを使用して生成された例を使用します-あなたが既に展開したいKollin/JSアプリケーションがある場合は、先にスキップし、代わりにそれを使用してください.
ボイラープレートのコリン/JSプロジェクトはすぐに2007年に生成されますIntelliJ IDEA ファイルに移動します.サイドバーで「Kollin」を選択し、「Kotlin/JS」セクションでプロジェクトテンプレートを選択する(私は反応プロジェクトを選んでいます).プロジェクトJDKを選択する必要があります.他のすべてについては、デフォルトの設定は細かく調整される必要はありません.

基本的なプロジェクトがあるので、Githubで入手してください.リポジトリを作成し、コードをプッシュします.

Githubにコードを置く

We could, of course, use GitHub's web interface リポジトリを設定し、手動でローカルリポジトリを出力するIntelliJ IDEA's Version Control Integration 新しいGithubリポジトリにプロジェクトコードを移動するのもスムーズです.「VTCS」タブで「Githubの共有プロジェクト」を選択します.

この機能を使用して初めての場合は、Intellijのアイデアを使用すると、Githubアカウントを使用して認証を要求することがあります.次に、リポジトリ名、その可視性(private/public)を指定し、Githubに表示される短い説明を提供できます.

いったん確認されたら、IntellijのアイデアはGithubプロジェクトを作成し、「初期のコミットのためのファイルを追加」ウィンドウを表示します.このウィンドウは単に「add」を押して受け入れることができます.

あなたが気づいたかもしれないように、Intellijアイデアはここでデフォルトのセットを自動生成することで私たちの生活を少し簡単にします.gitignore ファイルは、ソースコントロール(ビルドアーティファクトやローカル構成など)にチェックしてはいけないファイルが正しく無視されていることを確認します.
コミットが終了すると、Githubリポジトリへのリンクを含む小さな通知バブルが表示されます.

Githubアクションの設定

Time to set up GitHub Actions! Actions will be responsible for building and testing our project – turning our Kotlin source files into .js and .html artifacts, running any unit tests we might have, and copying files into the right location for deployment on GitHub Pages (a branch called gh-pages by convention). We configure Actions using so-called workflows , どのようにコードを変換してビルドするかについての指示を含むYAML設定ファイルです.
Githubは、ワークフローを探します.github/workflows ディレクトリは、このディレクトリのルートでこのディレクトリ構造を作成しましょう.内部で新しいファイルを作りましょうbuild-and-publish-kjs.yml , 次の設定を追加します.

name: Build and Publish
on: [ push, pull_request ]
jobs:
  build:
    name: Test and Build
    runs-on: ubuntu-latest
    steps:

      # Setup Java 1.8 environment for the next steps
      - name: Setup Java
        uses: actions/setup-java@v1
        with:
          java-version: 1.8

      # Check out current repository
      - name: Fetch Sources
        uses: actions/checkout@v2

      # Build application
      - name: Test and Build
        run: ./gradlew build

      # If main branch update, deploy to gh-pages
      - name: Deploy
        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main'
        uses: JamesIves/[email protected]
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: build/distributions # The folder the action should deploy.
          CLEAN: true # Automatically remove deleted files from the deploy branch

我々の行動YAMLを理解すること

我々は、この設定を使用するだけで、次のステップに移動することができます-しかし、それは常にしようとすると我々のプロジェクトで何が起こっている理解するのは良いことだ.YAMLの設定はかなり自然に読まれていますが、まだこの設定ファイルのセクションをすぐに見たいと思いますGitHub Actions documentation 詳細は、

まずワークフローAを与えますname – この場合、Build and Publish .

次に、このワークフローのトリガーを定義します.プッシュコードが常にコンパイルされていることを確認したいので、プルリクエストも微調整したいので、値をpush and pull_request .

次に、job , どのグループを指定した環境で実行するかを指定します.ubuntu-latest ).

今、我々は異なる定義steps ビルドは次のようになります.

KotlinコンパイラはJavaを必要としているので、predefined GitHub Action Javaをインストールするには1.8 .

使用するanother predefined Action プロジェクトのコードをチェックアウトします.

私たちは./gradlew build コマンド.build NPMとGradleからすべての依存関係をインストールして、アプリケーションをコンパイルして、プロジェクトに含まれるどんなテストも実行します.

最後に、私たちはanother Action Githubページにプロジェクトを配備するにはmaster or main ブランチ(開発ブランチをパブリックに展開したくない!我々はこの行動をbuild/distributions フォルダは、ここでは、Kollin.js and .html 人工品

TLこのワークフローはすべてのコミットとプルリクエストをビルドし、テストしますmaster or main ブランチ、変更はページを介して公開するために準備されます.

ワークフローファイルのコミット

Githubプロジェクトで新しく作成されたワークフローを有効にするにはbuild-and-publish-kjs.yml .
intellij - ideaの"Commit and push "機能を使用すると、GitHubアカウントがどのように認証されるかによって、Githubリポジトリにワークフローファイルを含むコミットを押すと、次のエラーが発生する可能性があります.

error: failed to push some refs to 'https://github.com/SebastianAigner/kotlin-js-on-github-pages.git'
To https://github.com/SebastianAigner/kotlin-js-on-github-pages.git
!   refs/heads/master:refs/heads/master [remote rejected] (refusing to allow an OAuth App to create or update workflow `.github/workflows/build-and-publish-kjs.yml` without `workflow` scope)
Done

これは、ワークフローを変更するコミットをプッシュする特定のスコープを必要とするGithubによるOAuth問題のためです.あなたはそれに関する詳細情報を見つけることができますvote on it here . 代わりに、Intellijのアイデアで統合された端末を介してコードをコミットすることができますgit push origin master :

プッシュが完了したら、私たちは私たちのKOTLIN/JSアプリケーションの進捗状況を見ることができます構築され、当社のGithubリポジトリの“アクション”タブでパブリッシングの準備をした.

Githubページの設定

After it finished, the workflow we created and triggered in the previous section put our final .js and .html artifacts on the gh-pages branch of our repository, just as we planned:

これは、私たちのリポジトリのGithubページ機能を有効にし、このブランチにポイントします.タブを使用してこれを行うことができます.
どこか下の近くには、“githubページ”とラベルのセクションを見つけることができます.我々はgh-pages 枝/ (root) (デフォルト)と"Save "save ":

私たちの変更を保存した後、このセクションにスクロールすると、我々のアプリケーションが利用可能なURLを明らかにする.(以前はgithubページ用のカスタムドメインを設定しましたので、デフォルトで使用します).あなたが持っていないならばcustom configuration , アプリケーションのURLは、通常、<username>.github.io/<reponame> . このURLを訪問すると、すべての栄光の私たちのkotlin/jsのアプリケーションを示し、世界を参照してください.

あなたは友人や同僚とあなたのコトリン/JSのアプリケーションを共有したり、お気に入りのニュースアグリゲーターでそれを投稿し、アップロードするためにupvotesを待って、このリンクを使用することができます!😉
(プロジェクトがプライベートリポジトリにある場合、GITUBページの可視性を変更したい場合があります.GitHub docs .)

スピンのためのあなたのプロジェクトを取る！

我々は完了です!今後は、コードをプッシュするたびに、プロジェクトが自動的にGithubのCIサーバーに構築されます.コミットが不完全な場合は、Webインターフェイス上でので-を参照することができます電子メールを介しても通知されます!

リポジトリのメインブランチにプッシュすると、<username>.github.io/<reponame> ) 自動的に更新されます.
そして、誰かがプル要求をするとき、ビルドとテストステータスは直接文脈で示されます:

ありがとう！

このポストが役に立つと思います.GitHub Actions 強力であるが、複雑なツールであり、これらの指示がKotlin/JSと共に始めるのが少し簡単になることを願っています.あなたはsample project I used Githubのこのチュートリアルのスクリーンショットを作成し、将来のプロジェクトのためのインスピレーションまたはテンプレートのソースとして使用します.
あなたが同様のコンテンツに興味を持っているなら、私にフォローを与えることを検討し、ここでdev . toまたはTwitterの日付まで滞在する.
あなたは将来のチュートリアルのアイデアを持っている場合は、以下のコメントでそれらを共有してください、またはどこか他のあなたは私のホールドを得ることができます!
このブログのポストのために私と彼のCIの知恵のいくつかを共有するための特別な感謝!