はじめてのSymfony4 + Vue.js

1. Symfony4のインストール

2018年07月01日 by unio

Symfony4のプロジェクト作成からWelcomeページの確認までを行います。 詳しいセットアップは公式サイトをご覧ください。

Symfony4プロジェクトの作成

まずはSymfony4のプロジェクトを作成します。 Symfony4のインストールはComposerで行うため、 Download Composerの手順でPharをダウンロードします。
            
                php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
                php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { 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.pharのcreate-projectコマンドでプロジェクトを作成します。
            
                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 tutorial-sf4vue
            
        
            
                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.pharを利用する方法だと、毎回対象のカレントディレクトリにpharを置くかパスを指定しなければいけません。 さすがに開発時は面倒なので、公式サイトの方法でグローバルなコマンドにできます。
                        
                            sudo mv composer.phar /usr/local/bin/composer
                        
                    
ただしプロダクション環境ではグローバル管理は避けたいので、自分はよくプロジェクト内にMakefileを用意してpharを管理しています。 本チュートリアルでもグローバル登録はせずに、composer.pharを利用していきます。
Makefile
                        
                            composer.phar:
                                php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
                                php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { 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のセットアップを行います。