Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
  • 2019.08.03に公開
  • 2019.10.12に更新
  • SPA開発
  • 2. 開発環境を整える
  • No.3 / 4
「SPA開発」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「SPA開発」の続編は、カテゴリー「 Udemy 」 で公開しています。

この記事で達成すること

今回は、この2つの作業を行っていきます。

  1. Bitbucketに公開鍵を追加する
  2. BitbucketにRailsプロジェクトをアップロードする

Bitbucketに公開鍵を追加する

まずはBitbucketのセットアップを行っていきます。

1. まずは新規会員登録

まだ会員登録が済んでいない方は、下のリンクから登録を済ませておいてください。

Signup - Bitbucket

2. 公開鍵の作成

自分のパソコン上からBitbucketにプロジェクトをアップロードするには公開鍵が必要です。

既に公開鍵を作成している方は読み飛ばしてください。

まず公開鍵が存在するかターミナル上で確認しておきましょう。

$ cat ~/.ssh/id_rsa.pub

まだ作成していない場合はこのように表示されるはずです。

No such file or directory

それではssh-keygenコマンドを実行して作成していきます。(実行ディレクトリはどこでもOKです)

$ ssh-keygen
Generating public/private rsa key pair

# 鍵の保存先を聞かれます。変更する必要はないので、そのままEnterキーで進みます。
Enter file in which to save the key (/Users/ユーザー名/.ssh/id_rsa):

# 鍵のパスワードを設定するか聞かれます。
# 設定しない場合はそのままEnterを、設定する場合はパスワードを入力します。
Enter passphrase (empty for no passphrase):

# パスワードの確認をされます。同じパスワードを入力してください。
# 設定していない場合は空欄のままEnterキーで進みます。
Enter same passphrase again:

これで公開鍵が作成できました。確認しましょう。

$ cat ~/.ssh/id_rsa.pub

# こんな感じの文字列が表示されるはずです。
ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAklOUpkDHrfHY17SbrmTIpNLTGK9Tjom/BWDSUGPl+nafzlHDTYW7hdI4yZ5ew18JH4JW9jbhUFrviQzM7xlELEVf4h9lFX5QVkbPppSwg0cda3Pbv7kOdJ/MTyBlWXFCR+HAo3FXRitBqxiX1nKhXpHAZsMciLq8V6RjsNAQwdsdMFvSlVK/7XAt3FaoJoAsncM1Q9x5+3V0Ww68/eIFmb1zuUFljQJKprrX88XypNDvjYNby6vw/Pb0rwert/EnmZ+AW4OZPnTPI89ZPmVMLuayrD2cE86Z/il8b+gw3r3+1nKatmIkjn2so1d01QraTlMqVSsbxNrRFi9wrf+M7Q== schacon@agadorlaptop.local

3. 公開鍵をBitbucketに追加する

Bitbucketにログインします。

  1. 左下のアイコンをクリックするとメニューが表示されます。
  2. 「View Profile」をクリックしてください。

2019-08-02 21-23-43

  1. 設定をクリックし、
  2. セキュリティ項目の中にある「SSH 鍵」をクリックしてください。

2019-08-02 21-36-37

  1. 「鍵を追加」ボタンをクリックしてください。

2019-08-02 21-42-54

  1. 先ほどの公開鍵をにコピペします。 ここのkeyには自分のメールアドレスを含めないでください。
  2. 「鍵を追加」ボタンをクリックします。

labelは何でも良いですが、自分のパソコンだと分かるような名前をおすすめします。

2019-08-02 22-00-10

これでBitbucketに公開鍵は追加されました。

新しいリポジトリを作成する

  1. 左メニューアイコンの「+」をクリックします。

2019-08-03 14-34-43

  1. メニューのリポジトリをクリックしましょう。

2019-08-03 14-37-18

  1. リポジトリ名は何でも良いですが、アプリ名と同じ名前が良いでしょう。
  2. アクセスレベルは非公開とします。チェックがついていることを確認してください。
  3. 課題管理、wikiにチェックを入れます。今後取り組むことや、アプリの説明などを記入できる機能です。Bitbucket上でプロジェクトを共有した際に便利です。(機能が不要な場合はチェックを付けなくてOKです)
  4. プログラミング言語は「Ruby」を選択します。リポジトリにRubyのアイコンが付きます。(その程度?なので必須ではありません)
  5. リポジトリの作成ボタンをクリックします。

2019-08-03 14-41-24

開発環境のリポジトリをBitbucketに接続する

リポジトリを作成した直後の画面です。

バケツに何かを入れましょう!!(は?)

  1. 画面下の手順に沿ってターミナル上で実行していきます。

2019-08-03 14-57-21

Railsプロジェクトのルートディレクトリに移動

自身のディレクトリパスに置き換えてください。

$ cd rails/myapp8

Bitbucketに接続する

Bitbucket上に表示されるコマンドをコピーして実行すればOKです。

$ git remote add origin git@bitbucket.org:アカウント名/myapp8.git
$ git push -u origin master

少し時間がかかります。。。

Bitbucketに接続できたか確認する

ターミナルにこのように出てきたら成功です。

ブラウザのBitbucketをリロードして確認してみましょう。

Branch 'master' set up to track remote branch 'master' from 'origin'.

変更したファイルをBitbucketにアップロードするには

今後はパソコン上で編集したRailsプロジェクトを、Bitbucket上にバックアップをとっていきます。

まず、ステージングリポジトリに変更プロジェクトを追加し

$ git add -A

コミットします。

$ git commit -m "message"

そして、Bitbucketにプロジェクトをpushします。

$ git push

この手順を押さえておけば基本的に大丈夫です。

以上、お疲れ様でした。
:cat::dog::mouse::hamster::rabbit::wolf::frog::tiger::koala::bear::pig::pig_nose::cow::boar::monkey_face:

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
SPA開発の投稿
1
  • 更新情報
  • /
  • #01
「Rails apiとNuxt.jsでSPA開発」のデモアプリを開発中...。【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1
  • 今回作るアプリケーション
  • /
  • #01
Railsアプリの完成イメージ画像と作ろうと思った経緯
2
  • 今回作るアプリケーション
  • /
  • #02
今回作るRailsアプリの全体像と機能の整理
1
  • 開発環境を整える
  • /
  • #01
macにRailsをゼロからインストールする
2
  • 開発環境を整える
  • /
  • #02
Rails apiモードのプロジェクトを作成し、Gitにコミットする
3
  • 開発環境を整える
  • /
  • #03
Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
4
  • 開発環境を整える
  • /
  • #04
HerokuCLIのインストールとherokuアプリケーションの作成
1
  • RailsをHerokuにデプロイする
  • /
  • #01
Herokuのデータベース設定と開発に便利なgemを導入する
2
  • RailsをHerokuにデプロイする
  • /
  • #02
HerokuにPumaを導入するためのRailsセットアップ
3
  • RailsをHerokuにデプロイする
  • /
  • #03
Railsに"Hello"を表示してHerokuへデプロイする
1
  • RailsとNuxt.jsを共存させる
  • /
  • #01
【RailsとNuxt.jsの共存】Rails上にNuxt.jsのプロジェクトを構築しよう
2
  • RailsとNuxt.jsを共存させる
  • /
  • #02
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
3
  • RailsとNuxt.jsを共存させる
  • /
  • #03
Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ
4
  • RailsとNuxt.jsを共存させる
  • /
  • #04
初めてのRailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで
1
  • データベース設計
  • /
  • #01
データベースを正規化する前に、会計システムの勘定科目データを整理する
2
  • データベース設計
  • /
  • #02
会計システムのデータベース設計に挑む
1
  • バージョンアップ情報
  • /
  • #01
【ご報告】Nuxt.jsを2.10.2にバージョンアップしました
2
  • バージョンアップ情報
  • /
  • #02
【ご報告】Railsを6.0.0にバージョンアップしました
1
  • Userモデル開発
  • /
  • #01
本番環境と開発環境でRailsのSeedデータを切り替える
2
  • Userモデル開発
  • /
  • #02
Railsにユーザーテーブルを作成する【テーブル確認コマンド】
3
  • Userモデル開発
  • /
  • #03
【Rails】EachValidatorクラスを使ったEmailカスタムバリデーション【lib以下読み込み】
4
  • Userモデル開発
  • /
  • #04
【Rails】エラーメッセージの日本語化【i18nとja.ymlのセッティング】
5
  • Userモデル開発
  • /
  • #05
【Rails】開発・テスト・本番環境の全てにユーザーSeedデータ投入する
6
  • Userモデル開発
  • /
  • #06
【Rails】ユーザーモデルのバリデーションをテストする
1
  • ログイン周りのレイアウト設計
  • /
  • #01
【Nuxt.js】ログインフラグでレイアウトを切り替えるテクニック【2019/12/07追記あり】
2
  • ログイン周りのレイアウト設計
  • /
  • #02
【Nuxt.js】ウェルカムページのレイアウト構築【sassの導入】
3
  • ログイン周りのレイアウト設計
  • /
  • #03
【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
4
  • ログイン周りのレイアウト設計
  • /
  • #04
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。