まず試したことです。以下のことを試してみました。

プランは「ライトプラン：月額220円」契約です！

結論としては、月額220円でWordPress複数起動できて、Laravel/CakePHPも使え、PHPであれば何でも使い放題という感想です。安くPHPのプログラムをサーバ上で動かしたい方にオススメです。

また、WordPressが簡単に使えて、とにかく早くて安い印象ですので、Wordpressを手軽に始めたい方にもオススメです。

まず、スターサーバーの特徴からみていきます！

スターサーバーの特徴

スターサーバーの特徴として、以下の点を記載していきます。

7つのメリット

7つのメリットを記載します。

①安価

DBを使用する場合でも月額220円(ライトプラン)で利用できる

→WordPressが月額220円(ライトプラン)で始められます

→WordPressだけではなくPHPで作られたプログラムは動作可能です

②2週間無料お試しが可能です！

迷ったらお試しができます！試しに使ってみましょ！

お試しの際はこちらから

③高速サーバー環境が利用できる

スターサーバーは、オールSSDの高速サーバー環境です。

→WordPressも高速です！高速であることはSEO的にも有利?

④高い安定性

急なアクセス増加時も即時プラン変更可能です。

→詳細は以下をご参照くださーい

プラン変更について | レンタルサーバー【スターサーバー】

レンタルサーバー「スターサーバー」のご利用マニュアル | より上位のプランに契約プランを変更する場合の手順です。

www.star.ne.jp

⑤無料SSLがある

無料でサイトをSSL化できます(httpsでアクセスできます)。

SSL化することで、SEO的に有利になります。

また、アクセスする人にとって安心感のあるサイトになります。

⑥不正なアクセスに対するセキュリティを強化する機能もあり

セキュリティ強化機能があり安心して使用可能

以下公式からの引用です

ご利用のWordPressにおいて、管理者ツール(ダッシュボード)に対する国外IPアドレスからの接続を制限したり、パスワード総当り(ブルートフォースアタック)による第三者のログインを防止するなど、不正なアクセスに対するセキュリティを強化する機能です。

WordPressセキュリティ設定 | レンタルサーバー【スターサーバー】

レンタルサーバー「スターサーバー」のご利用マニュアル | ご利用のWordPressのセキュリティを強化する「WordPressセキュリティ設定」機能のご説明です。本機能によって国外IPのアクセスを制限したり、ログイン試行回数を制限するなどの設定が可能です。

www.star.ne.jp

⑦Cron設定も可能

プログラムの定期実行が可能です。

Cronの設定 | レンタルサーバー【スターサーバー】

レンタルサーバー「スターサーバー」のご利用マニュアル | 指定した日時や一定期間毎にプログラムを実行することのできるCronについての説明や、サーバー管理ツールからCronを設定する際の手順についてのご説明です。

www.star.ne.jp

次はデメリットについて記載していきます

デメリット

2つのデメリットについて記載していきます。

①自動バックアップ機能は用意されていない

基本的に手動バックアップですので、忘れずにバックアップ取りましょう！

②ネット上の情報はあまり多くない

他のレンタルサーバと比べてネット上の情報はあまり多くない印象です。

自分で使いこなせそうか、まずはお試ししてみるのがオススメです。お試しの際はこちらから！

次はプランについてです！

プラン

WordPressが使えるプランとして

があり、アクセス数等によってプランを柔軟に選ぶことができます。

ライトプランが月額：220円で色々できるのでオススメです。具体的に何ができるかはこちらをご参照ください。

月額550円のハイスピードプランも「独自ドメイン永久無料特典付き」などお得な特典があるのでオススメです。

次は実際にスターサーバーを使ってみます！

スターサーバーを実際に使ってみる

①WordPressを1つ使ってみる

まずは、WordPressを試してみます。

GUI操作で設定可能なので簡単！！下のページ参考に簡単に使えるようになります。

WordPressのインストール方法(簡単インストール) | レンタルサーバー【スターサーバー】

レンタルサーバー「スターサーバー」のご利用マニュアル | コンテンツ管理システム(CMS)の「WordPress 日本語版」を「簡単インストール」機能を使ってインストールする際の手順です。

www.star.ne.jp

②WordPressを複数使ってみる

WordPressを複数インストールして、複数サイトの運用を試してみます。

下の5ステップでできるので簡単！！

①１つ目のWordPressはGUI操作で立ち上げる(下記ページ参照)

WordPressのインストール方法(簡単インストール) | レンタルサーバー【スターサーバー】

レンタルサーバー「スターサーバー」のご利用マニュアル | コンテンツ管理システム(CMS)の「WordPress 日本語版」を「簡単インストール」機能を使ってインストールする際の手順です。

www.star.ne.jp

②WordPress公式ページから自分のPCにWordPressをダウンロードする

ダウンロード

Get WordPress Everything you need to set up your site j…

ja.wordpress.org

③FTPソフトを使用してサーバにWordPressアップロード用のフォルダを作成する。

④作成したフォルダにWordPressをアップロードする。

⑤「http://ドメイン/③で作成したフォルダ」にアクセスしてインストールをする。その際、「テーブル接頭辞」は、すでにインストールしてあるものと被らないよう設定する。被ると既に作っているブログが上書きされてしまう事態に陥りおます。

以上でインストール完了。

③Laravelを使ってみる

次にLaravelを動かしてみます。

こちらは下記の3ステップでできるので簡単！！

①自分のPCローカルで開発する

②①で出来上がったソースコード全てをスターサーバーにアップロードする。

③DBを使用する場合「.env」ファイルのDB設定箇所をスターサーバーのDB情報に書き換える。

Laravelをプロジェクト新規作成からスターサーバー上で動かす

以下公式ページを参考にLaravelプロジェクト作成から、スターサーバ上で動かすとこまでやってみます！

Laravel - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small...

laravel.com

①ローカルで(PC上で)プロジェクトを作成します

composer create-project laravel/laravel example-app

②ローカルでLaravelを立ち上げます。

cd example-app
php artisan serve

③ブラウザで「http://localhost:8000」にアクセスして以下の画面が出ればOKです。

laravel+starserver

④ソースコードをftpソフトでスターサーバー へアップロードします。

⑤「http://{ドメイン}/public/index.php」にアクセスし、再度以下の画面が表示され、スターサーバ上でLaravelが動いていることがわかります。

laravel+starserver

④CakePHPを使ってみる

次はCakePHPです。以下公式ページを参考にCakePHPプロジェクト作成から、スターサーバ上で動かすとこまでやってみます！

インストール - 3.10

book.cakephp.org

①ローカルで(PC上で)プロジェクトを作成します

composer self-update && composer create-project --prefer-dist cakephp/app:^3.8 my_app_name

②ソースコードをftpソフトでスターサーバー へアップロードします。

③「http://{ドメイン}/index.php」にアクセスし、再度以下の画面が表示され、スターサーバ上でCakePHPが動いていることがわかります。

CakePHP+StarServer

使ってみた感想

PHP系は結構何でもできるので満足している。

Laravel/CakePHPも使えるし、wordpressの複数起動も簡単。

そして安くて早い！

次は、スターサーバーを2週間試しに使う方法を記載します。

試しに使ってみたい方はご参照ください。

スターサーバーを2週間試しに使う方法

スターサーバーをお試しで使う方法を記載します。

スターサーバーを2週間試し

①以下のリンクから申し込みをする。

②サーバーの設定が完了したらメールがくるので待つ

③サーバ設定(WordPressの設定等)をする。

まとめ

「ライトプラン：月額220円」で

ができることが確認できました。

コスパ最高ではないかと！

Laravel + Vue.jsの環境構築は構築は色んなことに情報があると思うので、

より安全な開発を行うことができるTypeScriptを導入したバージョンの環境構築について記載していきます。

コピペでできるのでお試しください。

インストール＆プロジェクト作成

composer create-project laravel/laravel --prefer-dist sample_app
cd sample_app
yarn install
npm i -D vue
npm install vue-template-compiler --save-dev
npm install --save vue-property-decorator

環境設定

tsconfig.jsonを追加

{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "include": [
    "resources/assets/ts/**/*"
  ]
}

vue.shims.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

webpack.mix.js

let mix = require('laravel-mix');

mix.ts('resources/assets/ts/app.ts', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

package.json(scripts内のパスのみ修正)

{
    "private": true,
    "scripts": {
        "dev": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "ts-loader": "^6.2.1",
        "typescript": "^3.8.3",
        "vue": "^2.6.11",
        "vue-property-decorator": "^8.4.1",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "webpack": "^4.42.0"
    }
}

resources/assets/sass/app.scss

とりあえず空ファイル作成

resources/views/welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel</title>
  <link rel="stylesheet" href="/css/app.css">
</head>
<body>
<main>
  <div id="app"></div>
</main>
<script src="/js/app.js"></script>
</body>
</html>

resources/assets/ts/app.ts

import Vue from 'vue';
import bootstrap from './bootstrap';
import AppComponent from './components/App.vue';

bootstrap();

const app = new Vue({
  el: '#app',
  render: h => h(AppComponent)
});

resources/assets/ts/bootstrap.ts

import Axios, { AxiosStatic } from 'axios';

declare global {
  interface Window {
    axios: AxiosStatic;
  }
  interface Element {
    content: string;
  }
}

export default function bootstrap() {

  window.axios = Axios;

  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

  let token = document.head.querySelector('meta[name="csrf-token"]');

  if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }

}

resources/assets/ts/components/App.vue

<template>
  <div class="App">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1>{{ message }}</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';

  @Component
  export default class App extends Vue {
    message = 'Laravel + Vue.js + TypeScript';
  }
</script>

<style scoped>
  h1 {
    text-align: center;
    margin: 4rem 0;
  }
</style>

実行

ターミナルを２つ起動し、それぞれのターミナルで下記のコマンドを打ち込む。

こうする事で、TypeScriptは自動的にコンパイルされる。

npm run watch

php artisan serve