PROGRAMMING

Slackクローンアプリ作成に着手【いせ日記】

今日もプログラミングの学習内容を載せていきます!

以前からインスタのクローンを作りますって告知していたんですが、slackのクローンアプリに変更します笑

理由はチャットアプリの方が複雑で面白そうっていうだけの理由です、、。

「インスタのクローン」とググると結構作っている方がいて、特にスクールの課題で作らされたみたいなことが多くあったので、slackの方になんとなくですが変えちゃいました!

slackのクローン作ってから、インスタのクローンを作ろうかなって思っています。

それでは、今日の学習内容です!

今日の学習内容
・Vue.jsの開発環境の構築(AWS)

以上の二つを今日はやっていこうと思います!

作業手順

Vue.js開発環境の構築

まずはAWSでの開発環境の構築をやっていきます!

こちらを参考に構築していきました!

ステップ 1: 必要なツールをインストールする

AWS Cloud9 IDE のターミナルセッションで、node --version コマンドを実行して Node.js がインストール済みであるかどうかを確認ししていきます。

メニューバーで、[Window (ウィンドウ)]、[New Terminal (新しいターミナル)] の順に選択します。

以下のコードをターミナルで実行。

$sudo yum -y update

nvmをダウンロードするために、下記のコマンドを次に実行します。

$curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

nvmをロードするコマンドを含む~/.bashrcファイルを入手する。

$. ~/.bashrc

次に、最新バージョンのNode.jsをインストールします。

$nvm install node

Node.jsについてはこのページを参照してみてください。

ステップ 2: コードを追加する

hello.jsというファイルを作り、下記のコードを保存します。

console.log('Hello, World!');

console.log('The sum of 2 and 3 is 5.');

var sum = parseInt(process.argv[2], 10) + parseInt(process.argv[3], 10);

console.log('The sum of ' + process.argv[2] + ' and ' +
  process.argv[3] + ' is ' + sum + '.');

ステップ 3: コードを実行する

[Run (実行)]、[Run Configurations (実行設定)]、[New Run Configuration (新しい実行設定)] の順に選択します。

[[New] - Idle ([新規] - アイドル)] タブで、[Runner: Auto (ランナー: 自動)] を選択し、[Node.js] を選択します。

[Command (コマンド)] に「hello.js 5 9」と入力します。

下記の順番で、下記のように出力されれば大丈夫です!

ステップ 4: AWS SDK for JavaScript in Node.js をインストールして設定する

npm を使用して install コマンドを実行。

$npm install aws-sdk

上記の実行をして、No space left on deviceが出てしまいました。

理由は容量に空きがないかららしいです。

解決方法は二つです。

・ファイルを削除する

・AWSの容量を増やす

僕は容量を増やす方で解決したので、そちらの方法を今回は紹介します。

こちらのページを参考にしてください。

EC2」のページに入ります。

ボリューム」から「アクション」を押し、「ボリュームの変更」を選択。

サイズ」を変更します。

僕は10から100に変更しました。

これでもう一度下記のコマンドを実行してみます。

$npm install aws-sdk

無事実行されました!

ステップ 5: AWS SDK コードを追加する

AWS Cloud9 IDE で、以下の内容のファイルを作成し、s3.js という名前で保存します。


if (process.argv.length < 4) {
    console.log('Usage: node s3.js <the bucket name> <the AWS Region to use>\n' +
      'Example: node s3.js my-test-bucket us-east-2');
    process.exit(1);
  }

  var AWS = require('aws-sdk'); // To set the AWS credentials and region.
  var async = require('async'); // To call AWS operations asynchronously.

  AWS.config.update({
    region: region
  });

  var s3 = new AWS.S3({apiVersion: '2006-03-01'});
  var bucket_name = process.argv[2];
  var region = process.argv[3];

  var create_bucket_params = {
    Bucket: bucket_name,
    CreateBucketConfiguration: {
      LocationConstraint: region
    }
  };

  var delete_bucket_params = {Bucket: bucket_name};

  // List all of your available buckets in this AWS Region.
  function listMyBuckets(callback) {
    s3.listBuckets(function(err, data) {
      if (err) {

      } else {
        console.log("My buckets now are:\n");

        for (var i = 0; i < data.Buckets.length; i++) {
          console.log(data.Buckets[i].Name);
        }
      }

      callback(err);
    });
  }

  // Create a bucket in this AWS Region.
  function createMyBucket(callback) {
    console.log('\nCreating a bucket named ' + bucket_name + '...\n');

    s3.createBucket(create_bucket_params, function(err, data) {
      if (err) {
        console.log(err.code + ": " + err.message);
      }

      callback(err);
    });
  }

  // Delete the bucket you just created.
  function deleteMyBucket(callback) {
    console.log('\nDeleting the bucket named ' + bucket_name + '...\n');

    s3.deleteBucket(delete_bucket_params, function(err, data) {
      if (err) {
        console.log(err.code + ": " + err.message);
      }

      callback(err);
    });
  }

  // Call the AWS operations in the following order.
  async.series([
    listMyBuckets,
    createMyBucket,
    listMyBuckets,
    deleteMyBucket,
    listMyBuckets
  ]);

ステップ 6: AWS SDK コードを実行する

npm を使用して install コマンドを実行し、コードから Amazon S3 オペレーションを非同期的に呼び出します。

$npm install async

順番はステップ3と同様です。

[Run (実行)]、[Run Configurations (実行設定)]、[New Run Configuration (新しい実行設定)] の順に選択します。

[[New] - Idle ([新規] - アイドル)] タブで、[Runner: Auto (ランナー: 自動)] を選択し、[Node.js] を選択します。

[Command (コマンド)] に「s3.js my-test-bucket us-east-2」と入力します。

下記のようになれば、完了です。

My buckets now are:

Creating a new bucket named 'my-test-bucket'...

My buckets now are:

my-test-bucket

Deleting the bucket named 'my-test-bucket'...

My buckets now are:

以上で、AWSでJavaScriptの開発環境は完了です!

まとめ【いせ日記】

今日の学習内容は以上です。

開発環境の構築といろいろVue.jsについて調べていたら結構時間がかかってしまい、作業の着手まで行くことができませんでした。

プログラミングってコードを打ち込む作業より、調べる作業が圧倒的に多いですよね笑

この調べる能力(サーチ力)がつけば、より効率的に作業が進められそうです、

明日からはUIの作成から進めていきたいと思います!

最後まで読んでいただきありがとうございました😆

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.