Help us understand the problem. What is going on with this article?

初めての さなボタン(2) 環境構築 on Windows 10 Pro

More than 1 year has passed since last update.

「初めての」さなボタン(2) 環境構築 on Windows 10 Pro

この記事は "名取さな Advent Calendar 2018" のエントリー記事です.
言い回しがせんせえ方向けになっていますので,ご了承ください.

経緯としては,さなボタン(2)はWindows 10 Proでの開発環境構築の前例がなく,
また当該wikiには前提ソフトウェアのインストール方法が書かれていないため,
FORNOが写真付き手順を公開する運びとなった.
Gitの導入方法はちょっと記事が長くなるから別の記事を読んでくださいm(_ _)m

ま,つよつよな者が教えるのは義務だからなー.くぅ~!
下の者のせんせえは一緒にがんばろー!

  • さなボタン(2) にContributeしたい
  • 名取さなにフォローされたい!
  • 名取さなのことだいすこだって世界に主張したい

対象

Dockerが動作するOSのせんせえがた
- Windows 10 Pro
- Mac OS
- 大抵のLinux OS

Gitを導入済みのせんせえがた
- 導入がまだのせんせえは https://git-scm.com/ でインストールしてきてくれよな!

対象外のせんせえについて

残念ながらWindows 10 Homeの人は,wikiを参考にしたり,主要開発者の発言等を参考に頑張ってインストールすることになるけど,がんばればできるぞい

さなボタン(2)ドキュメント

さなボタン(2)のWikiREADMEが唯一の情報源となっておる.頑張って読み取ろう

操作概要

Dockerを導入し,さなボタン(2)を立ち上げる.ブラウザで自分が立ち上げたさなボタン(2)を閲覧するゾ~

必要なソフトのインストール

Docker CE

  1. Docker CEの配布ページにいこう

image.png
2. Please Login to Downloadをクリックしてアカウントを作成し,ログインしよう
3. Get Dockerをクリックしよう

image.png
4. ダウンロードが始まるので終わったら実行.インストールするを押して,OK, Agree, Installなどと書かれているボタンを選択しよう

スクリーンショット (7).png
5. 最後にCloseしてインストール.続いて有効にするために再起動しよう

スクリーンショット (9).png
6. これ以降,何かDockerに聞かれたら適当にYesと答えよう すべてを終えるまでに2回ほど再起動します

image.png

以上で †導入完了†

sanabutton.github.io (さなボタン(2))の準備

  1. まずはGitが動く端末を起動しよう

よくわからないせんせえは Git bashってソフトウェアがはいっているはずなので,たちあげてね
image.png
image.png

  1. さなボタン(2)をダウンロードしよう
git clone https://github.com/sanabutton/sanabutton.github.io.git

入力したらエンターキーをターンッ!しような
image.png

さなボタン(2) 起動!

  1. Windows Power Shellを起動しよう

image.png
image.png

  1. さなボタン(2)のディレクトリ(フォルダ)に移動しよう
cd sanabutton.github.io.git

image.png
3. さなボタン(2)を起動しよう

docker-compose up

image.png

わかりづらいですが,doneと出てきたら†起動完了†

image.png
4. 自分のさなボタン(2)へアクセスしてみよう

node: Microsoft Edge 以外 のブラウザを使用してくれよな.IEでもいいけど.Edgeはだめだぞっ

ブラウザを立ち上げたら,URLのところに localhost:4000 と入力して,エンターをターンッしような

image.png

このようにさなボタン(2)が表示されれば無事にローカル環境にさなボタン(2)を†構築完了†

お疲れさな~!

補遺

  • localhostは自分自身のパソコンを指すURLです.ここでさなボタン(2)が表示できていればOK
  • HTMLファイルや,YAMLファイルを書き換えることで画面をカスタマイズできます(開発)
  • 開発結果をさなボタン(2)管理者に送るにはGitとGithubの知識が必要です

暇ができたら開発についても解説するな~

まとめ

Windows 10 Proでさなボタン(2)を動かすには,

dockerをインストールして,ソースコードを入手して,docker-compose upを実行する

これだけだぞ~!

forno
趣味でプログラムを生産する自称システムディベロッパーの学生。 C++20, JavaScript, PHP, Java9, HTML5 + CSS3 を主に、趣味でプログラムを作ったりプレゼントしたりしています。
https://github.com/forno
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした