Mac M1のVS Codeからdocker-compose.ymlで環境構築してみる

## 転載元
当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/mac-m1-vs-code-docker-compose/)

## はじめに
M1チップのMacでもDockerのインストールが無事できました。（Previewですが） 今度は、VS CodeからGithubに置いているDocker環境を持ってきて、ローカルで動作させてみます。

## 前提とか環境とか

Mac M1でやってみました。 とりあえず、DockerのPreviewをインストール済です。 [Mac M1にDockerインストールしてみます](http://techback.info/mac-m1-docker-install-2/ "Mac")今回は、開発用に用意しておいたDjango環境を構築してみます。 - Githubにdocker-compose.ymlが有る状態で進めます。
- VS Codeで作っていきます。

## Cloneしてファイルを持ってくるまで

### DockerのExtensionをインストール

VS Codeを起動して、**Docker**のExtensionをインストールしておいてください。 [![](http://techback.info/wp-content/uploads/2021/01/img_600681d2cc4f1.png)](http://techback.info/wp-content/uploads/2021/01/img_600681d2cc4f1.png)

### GithubからClone

左の**Source control**をクリックして、**Clone Repository**をクリック [![](http://techback.info/wp-content/uploads/2021/01/img_6006828e05546.png)](http://techback.info/wp-content/uploads/2021/01/img_6006828e05546.png)

上部、Extensionが表示されるので、**Clone from GitHub**をクリック [![](http://techback.info/wp-content/uploads/2021/01/img_600682fbca85c.png)](http://techback.info/wp-content/uploads/2021/01/img_600682fbca85c.png)

**Allow**をクリック 
[![](http://techback.info/wp-content/uploads/2021/01/img_6006834e75b3a.png)](http://techback.info/wp-content/uploads/2021/01/img_6006834e75b3a.png)

ブラウザで認証画面が表示されるので、**Continue**ボタンクリック 
[![](http://techback.info/wp-content/uploads/2021/01/img_6006838fc7fbe.png)](http://techback.info/wp-content/uploads/2021/01/img_6006838fc7fbe.png)

認証成功！ 
[![](http://techback.info/wp-content/uploads/2021/01/img_600683b89b54b.png)](http://techback.info/wp-content/uploads/2021/01/img_600683b89b54b.png)

Don\'t ask again for this extension.のチェックはお好みで。 **Open**をクリック [![](http://techback.info/wp-content/uploads/2021/01/img_600683cbedf62.png)](http://techback.info/wp-content/uploads/2021/01/img_600683cbedf62.png)

Githubで、Cloneしてくるリポジトリに移動して、Codeの所からURLをコピー 
[![](http://techback.info/wp-content/uploads/2021/01/img_6006863e122bb.png)](http://techback.info/wp-content/uploads/2021/01/img_6006863e122bb.png)

VS CodeのExtension欄に貼り付け。ドロップダウンで表示されたリポジトリ名をクリック [![](http://techback.info/wp-content/uploads/2021/01/img_6006868556283.png)](http://techback.info/wp-content/uploads/2021/01/img_6006868556283.png)

どこにCloneするか指定して、、、 
[![](http://techback.info/wp-content/uploads/2021/01/img_600686f92cd2d.png)](http://techback.info/wp-content/uploads/2021/01/img_600686f92cd2d.png)

Openボタンクリック 
[![](http://techback.info/wp-content/uploads/2021/01/img_60068713d9425.png)](http://techback.info/wp-content/uploads/2021/01/img_60068713d9425.png)

開いた際に、下記のメッセージが出るので、Reload Windowをクリック 
[![](http://techback.info/wp-content/uploads/2021/01/img_6006873c6d2d7.png)](http://techback.info/wp-content/uploads/2021/01/img_6006873c6d2d7.png)

## docker-compose up

VS Code下にTERMIANLが開いていると思うのでそこから、**docker-compose up** コマンドを実行 エラーが出ます、、、MySqlはダメなんですね。。。まだ 
[![](http://techback.info/wp-content/uploads/2021/01/img_60068ad55235e.png)](http://techback.info/wp-content/uploads/2021/01/img_60068ad55235e.png)

docker-compose.ymlファイルの、db imageをMariadbに変えてみます。 コレを 
```image: mysql:5.7```

コレに 
```image: mariadb```







そして、再度docker-compose upコマンドを。。成功したっぽい。

Docker Desktopで、動作していること確認できました。 
[![](http://techback.info/wp-content/uploads/2021/01/img_60068f03e6350.png)](http://techback.info/wp-content/uploads/2021/01/img_60068f03e6350.png)

Djangoのページも表示すること、確認できました！ 
[![](http://techback.info/wp-content/uploads/2021/01/img_600693fa5fea9.png)](http://techback.info/wp-content/uploads/2021/01/img_600693fa5fea9.png)