Zenn
📚

Amazon Linux2 でApache & Vue.js & VueRouterの環境構築をしてみる

2020/10/12に公開
AWS
Linux
Vue.js
Apache
tech

動作環境

OS : Amazon Linux release 2 (Karoo)
Apache : Apache/2.4.46 ()
Vue.js : vue@2.6.12

全体の流れ

  1. Apache2をインストールする
  2. Vue.jsをビルド&デプロイする
  3. Vue Routerを有効にする

1. Apache2をインストールする

インストール

EC2インスタンスにログインしてApacheをインストールしていきましょう。

$ sudo yum install httpd

起動

$ sudo systemctl start httpd

ブラウザを開いて､EC2インスタンスのIPアドレスを入力してアクセスしてください｡
ApacheのTest Pageが表示されていればOKです｡

2.Vue.jsをビルド&デプロイする

先ほど確認したテストページをVue.jsのページに置き換えていきます。

[ローカル]Vueプロジェクトのビルド

ローカルで作成しているVueプロジェクトをビルドしましょう。
プロジェクトのルートディレクトリに移動して、下記コマンドを叩けばビルド完了です。

$ npm run build

コマンドを叩くと、/dist にhtml,css&jsファイルが作成されるはずです。

Vueプロジェクトのデプロイ

distディレクトリに移動して、
先ほどビルドしたdistディレクトリ配下のファイル群をEC2側にコピーします。

$ cd /dist
$ sftp -i <キー名>.pem ec2-user@<IPアドレス>

これでsftpモードに入るので、ファイルをコピーします。

sftp> put -r dist

※-rオプションでディレクトリコピーが可能になります。distディレクトリを圧縮してコピーする場合は、「put <ファイル名>」で大丈夫ですね。

下記のコマンドを叩いてブラウザで確認して見ましょう。Vueプロジェクトのトップページが表示されているはずです。

$ sudo systemctl restart httpd

しかし、ページ遷移をしてブラウザの再読み込みを行うと、404エラーが出るはずです。
これは今までVueRouterで行っていたページ遷移をApache側が行ってしまうためです。
ここからは、Apacheの設定ファイルを編集して、Apacheのページ遷移を無効化していきます。

デプロイがうまくいかないときは...

  • ディレクトリ構成を確認
    -> 下記のようになっているはず。
$ cd /var/www/html
$ ls
css  favicon.ico  index.html  js

3.Vue Routerを有効にする

ここではApacheというhttpサーバーに搭載されている、URLの書き換え機能を利用して、全てのリクエストに対してindex.htmlをレスポンスする設定を行なっていきます。

Vue Routerでルーティングの処理は行っていると思うので、Apache側でのルーティング処理を無効にしていくという訳です。

URLの書き換え機能を有効にする

まずは、URL書き換え機能を有効にしていきます。
/etc/httpd/conf　に移動して、
Apacheの設定ファイル httpd.conf を編集していきましょう。

$ cd /etc/httpd/conf
$ ls
httpd.conf  magic

$ sudo vi httpd.conf
#
# Dynamic Shared Object (DSO) Support
#
# To be able to use the functionality of a module which was built as a DSO you
# have to place corresponding `LoadModule' lines at this location so the
# directives contained in it are actually available _before_ they are used.
# Statically compiled modules (those listed by `httpd -l') do not need
# to be loaded here.
#
# Example:
# LoadModule foo_module modules/mod_foo.so
#
Include conf.modules.d/*.conf

## この位置に下記を追加
# Vue Router　2020/10/12 added
LoadModule rewrite_module modules/mod_rewrite.so

「Dynamic Shared Object (DSO) Support...」と書いてある場所に下記の1行を挿入してhttpd.confを上書きしましょう。
LoadModule rewrite_module modules/mod_rewrite.so
これで書き換え機能の有効化は完了しました。

書き換え機能の実装

同じく、httpd.confファイルを編集していきます。

$ sudo vi httpd.conf

## 1番下の行に下記を追加
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

最後にApacheを再起動しておきましょう

$ sudo systemctl restart httpd

これでどのURLにアクセスしても、VueRouterどおりの挙動になるはずです。

便利なコマンド

実装でエラーが出てしまったときに使ったコマンドも載せておきます。

## 文法チェックを行う
$ apachectl configtest
## モジュールが有効か確認する
$ apachectl -M
$ apachectl -l

Discussion