-ao- ramune blog

©2024 unio / GO2直営からふるラムネ
2018年07月01日

はじめてのSymfony4 + Vue.js

Symfony4のインストール

チュートリアル対象バージョン

Composerのインストール

Symfony4のプロジェクト作成はComposerで行います。 適当なディレクトリ上で、本家ドキュメントを参考にcomposer.pharをダウンロードします。

コンソールコマンド
                
                    php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
                    php -r "if (hash_file('sha384', 'composer-setup.php') === 'a5c698ffe4b8e849a443b120cd5ba38043260d5c4023dbf93e1558871f1f07f58274fc6f4c93bcfd858c6bd0775cd8d1') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
                    php composer-setup.php
                    php -r "unlink('composer-setup.php');"

上記phpコマンドをすべて叩くとcomposer.pharが作成されます。

コンソールコマンド
                
                    ls -alF
                    -rwxr-xr-x  1 unio unio 1849094  7月  1 13:26 composer.phar*

２つ目のコマンドで失敗した場合は、Composerのバージョンが新しくなっている可能性があるので、 本家ドキュメント を参照して再度ダウンロードを行ってください。

Symfony4のプロジェクト作成

composer.pharのcreate-projectコマンドでSymfonyプロジェクトを作成します。

コンソールコマンド
                
                    php composer.phar create-project symfony/website-skeleton tutorial-sf4vue
create-projectコマンドでエラーが出る場合

必要なphpライブラリがインストールされていない可能性があります。 各OSのパッケージマネージャ経由でライブラリをインストールしてください。 下記はext-xmlパッケージをインストールするコマンド例です。

コンソールコマンド
                    
                        sudo apt install -y php7.2-xml

create-projectでtutorial-sf4vueディレクトリが作成されたので、cdコマンドで移動します。

コンソールコマンド
                
                    cd tutorial-sf4vue

tutorial-sf4vueディレクトリの中身はこのようになっています（Symfony 4.1.1の場合）。

コンソールコマンド
                
                    ls -alF
                    drwxr-xr-x 13 unio unio   4096  7月  1 13:39 ./
                    drwxr-xr-x  9 unio unio   4096  7月  1 13:39 ../
                    -rw-r--r--  1 unio unio   1231  7月  1 13:38 .env
                    -rw-r--r--  1 unio unio   1231  7月  1 13:38 .env.dist
                    -rw-r--r--  1 unio unio    416  7月  1 13:38 .gitignore
                    drwxr-xr-x  2 unio unio   4096  7月  1 13:38 assets/
                    drwxr-xr-x  2 unio unio   4096  7月  1 13:38 bin/
                    -rw-r--r--  1 unio unio   2033  7月  1 13:38 composer.json
                    -rw-r--r--  1 unio unio 208006  7月  1 13:38 composer.lock
                    drwxr-xr-x  4 unio unio   4096  7月  1 13:38 config/
                    -rw-r--r--  1 unio unio    302  7月  1 13:38 package.json
                    -rw-r--r--  1 unio unio   1116  7月  1 13:38 phpunit.xml.dist
                    drwxr-xr-x  2 unio unio   4096  7月  1 13:38 public/
                    drwxr-xr-x  6 unio unio   4096  7月  1 13:38 src/
                    -rw-r--r--  1 unio unio   9881  7月  1 13:38 symfony.lock
                    drwxr-xr-x  2 unio unio   4096  7月  1 13:38 templates/
                    drwxr-xr-x  2 unio unio   4096  7月  1 13:38 tests/
                    drwxr-xr-x  2 unio unio   4096  7月  1 13:38 translations/
                    drwxrwxrwx  4 unio unio   4096  7月  1 13:38 var/
                    drwxr-xr-x 20 unio unio   4096  7月  1 13:38 vendor/
                    -rw-r--r--  1 unio unio    852  7月  1 13:38 webpack.config.js
Composerのグローバル登録

Composerは 公式サイト の方法でグローバルなコマンドにできます。

コンソールコマンド
                    
                        sudo mv composer.phar /usr/local/bin/composer

本番環境など、グローバル管理だと不都合なケースもあるため、自分はMakefileと組み合わせてcomposer.pharを利用しています。

Makefile
                    
                        composer.phar:
                            php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
                            php -r "if (hash_file('SHA384', 'composer-setup.php') === 'a5c698ffe4b8e849a443b120cd5ba38043260d5c4023dbf93e1558871f1f07f58274fc6f4c93bcfd858c6bd0775cd8d1') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
                            php composer-setup.php
                            php -r "unlink('composer-setup.php');"

                        composer-update: composer.phar
                            php composer.phar update

Welcomeページの表示

tutorial-sf4vueフォルダ内でビルトインウェブサーバを起動します。

コンソールコマンド
                
                    php -S localhost:8000 -t public
                    PHP 7.2.5-0ubuntu0.18.04.1 Development Server started at Sun Jul  1 16:30:55 2018
                    Listening on http://localhost:8000
                    Document root is /home/unio/workspace/tutorial-sf4vue/public
                    Press Ctrl-C to quit.

http://localhost:8000/にアクセスすると、Welcomeページが表示されます。

Welcomeページを確認できたら、次はVue.jsのセットアップを行います。

次へ >>