HerokuへのBitbucketパイプラインに対する反応アプリの配備
HerokuへのBitbucketパイプラインに対する反応アプリの配備
の話を準備するAtlassian Community Event ハンブルクでは苦闘して、BitbucketとHerokuを一緒に使用するためのいくつかのドキュメントとチュートリアルにつまずいた.だから私は自分の最初の開発者の記事を書くことにした
Building a basic CI/CD pipeline for deploying a React App to Heroku using Bitbucket
始める
ステップ1 -作成反応アプリ
このチュートリアルではHerokuに反応アプリを展開するに焦点を当てるので、我々はちょうど反応スターターアプリを使用します.Herokuでアプリを実行するには、後で基本的なエクスプレスサーバーのセットアップを追加します.
反応アプリの作成と実行の前提条件:
Building a basic CI/CD pipeline for deploying a React App to Heroku using Bitbucket
npx create-react-app name-of-your-app
後に戻って、あなたの端末に次の行を入力するアプリを起動します
cd name-of-your-app
npm start
Step 2 - Bitbucketリポジトリを作成する
我々は我々のアプリを持っているし、我々のローカルマシン上で実行する今我々のGITリポジトリを作成する必要があります.だから我々はhttps://bitbucket.org . あなたがまだアカウントを持っていない場合は、無料(重要な近日)のいずれかを取得!
新しいリポジトリを作成するときは、少なくとも名前を指定する必要があり、アクセスレベルをprivateに設定します.ここで設定のほとんどは後で変更することができます.
よくできた!あなたは-多分最初の- gitリポジトリを作成しました.時間はあなたが左側に表示されるメニューを探索する.
Bitbucketヘッドについてもっと知りたい場合はofficial documentation .
ステップ3 - Herokuアプリを作成
我々はかなり我々のアプリを展開するに近いです.ヘッドオーバーhttps://heroku.com - あなたが1つを持っていない場合は再びアカウントを作成します.
ダッシュボードをクリックして新しいし、新しいアプリケーションを作成します.ダイアログで
あなたのアプリケーションが作成されますが、あなたのコードとGitリポジトリに戻る前に我々は我々のアプリを伝える必要がありますBuildpack 使いたいです.
後でアプリケーションを展開するためにもAPIキーが必要です.
Bitbucketパイプラインの配備
あなたのために実際に、私は難しい方法を学んだので、あなたがする必要はありません.
ステップ1 -セットアップエクスプレスサーバー
Visual Studioのコードに移動し、サーバーと呼ばれる新しいフォルダーをリポジトリのルートに追加します.そのフォルダ内でサーバーと呼ばれるファイルを作成します.このコマンドを端末で実行することで、
npm install express --save
const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'build');
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get('*', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
console.log('Hello World I run on PORT ' + port);
});
あなたのパッケージで.JSONのファイルを変更するスクリプトの行を起動するためのアプリケーションを起動します
"start": "node server/server.js",
ステップ2 -あなたのGitリポジトリにすべてをアップロードする
端末ウィンドウを開いて、反応アプリのルートディレクトリにあることを確認し、次の行を入力します.
git init
git add .
git commit -m "initial commit"
git remote add origin [https://[email protected]/username/name-of-your-repository.git](https://[email protected]/username/name-of-your-repository.git)
git push -u origin master
ステップ3 -セットアップと構成bitbucketパイプライン
我々のコードが我々の倉庫にある今、我々は我々の倉庫のためにパイプラインを可能にする必要があります.
我々の場合には、私たちは望みます.パイプラインを次の規則と手順でビルドするには、次の手順に従います.
我々は最終的にHerokuに我々の倉庫をプッシュしたい
はい、私はGEITを使用してHerokuに倉庫を押すことができました、しかし、それはこの記事を書くための私の意図でありませんでした！
パイプライン:すべてのパイプラインの定義が含まれます.
デフォルト:次の条件のいずれかが満たされない場合、すべてのプッシュで実行する手順が含まれます.
ステップ:各ステップは、あなたの倉庫のクローンで新しいDockerコンテナを開始します.
script :順番に実行されるコマンドのリストです.
パイプはアドオンや関数のように、いくつかの入力を受け取り、あなたのために必要です- Herokuへのリポジトリのアップロードのように
最後のBitbucketパイプライン.YMLファイルは次のようになります.
image: node:10.15.3
pipelines:
branches:
master:
- step:
name: Test App
caches:
- node
script:
- rm -rf package-lock.json
- rm -rf node_modules
- npm install
- npm run test
- step:
name: Create artifact
script:
- git archive --format=tar.gz master -o application.tar.gz
artifacts:
- application.tar.gz
- step:
name: Deploy to heroku
deployment: production
caches:
- node
script:
- pipe: atlassian/heroku-deploy:1.1.4
variables:
HEROKU_API_KEY: $HEROKU_API_KEY
HEROKU_APP_NAME: $HEROKU_APP_NAME
ZIP_FILE: "application.tar.gz"
WAIT: 'true'
終わり
閉じるこの動画はお気に入りから削除されています.私に知らせてください!!)
Reference
この問題について(HerokuへのBitbucketパイプラインに対する反応アプリの配備), 我々は、より多くの情報をここで見つけました https://dev.to/janszczepanski_/deploy-a-react-app-to-heroku-with-bitbucket-pipelines-3876テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol