#web 開発でよく使うリダイレクトと nuxtjs redirect

web 開発で必ず出てくるリダイレクトの話をまとめてみました!
Http redirect ならよく使う 301 と 302 など永久と一時的リダイレクト
恒久リダイレクトと一時的リダイレクトの区別は検索エンジンは自身のリンクを更新するかどうか
リダイレクトコードで恒久リダイレクトか一時的リダイレクトかを検索エンジンに知らせて HP の移行か、一時的遷移かを判断してくれるので、LP リニューアルなどは 301 恒久リダイレクト使うのが一般的。

#HTTP リダイレクトコード

コード種類メモ
301恒久的リダイレクトHP 移行時
302一時的リダイレクト一時エラーなど
303一時的リダイレクトリロード再実行防ぐためのリダイレクト
304特殊リダイレクト再検証された条件付きリクエストのために送信

#HTML HEAD リダイレクト

<head>
  <!-- <meta http-equiv="refresh" content="秒数;URL=URL"> -->
  <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
</head>

#javascript リダイレクト

window.location = "https://www.example.com/";

#Apache 設定リダイレクト

<VirtualHost *:443>
	ServerName example.com
	Redirect / https://www.example.com
</VirtualHost>

#htaccess リダイレクト

RewriteEngine On
RewriteCond %{http_host} ^www.old-domain.com

# 301
RewriteRule ^(.*) https://www.new-domain.com/$1 [R=301,L]

# 302
RewriteRule    ^page.htm$    new_page.htm    [R,NC,L]

## SSLリダイレクト
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# www から www なしにリダイレクト
RewriteCond %{HTTP_HOST} ^www\.domain\.com
RewriteRule (.*) http://domain.com/$1 [R=301,L]

#Nginx 設定リダイレクト

server {
	listen 80;
	server_name example.com;
	return 301 $scheme://www.example.com$request_uri;
}

#php リダイレクト

header('location: https://example.com');

#nuxtjs リダイレクト

nuxtjs の context 取得できるライフサイクルから redirect 利用

context 取得できるライフサイクル

  • asyncData
  • fetch
  • plugins
  • middleware
  • nuxtServerInit

sample

<template>
  <div></div>
</template>

<script>
export default {
  asyncData({ redirect }) {
    redirect("/order/step1");
  },
};
</script>

<style lang="scss" scoped></style>

#nuxtjs context について

context から取得できる値

  • app
  • store
  • route
  • params
  • query
  • env
  • isDev
  • isHMR
  • redirect
  • error

ソース

function (context) {
  // Universal keys
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error
  } = context
  // Server-side
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }
  // Client-side
  if (process.client) {
    const { from, nuxtState } = context
  }
}

SSR の場合

  • req
  • res
  • beforeNuxtRender

CSR の場合

  • from 遷移元
  • nuxtState

参考:HTTP のリダイレクト(opens new window)

2020-08-25
  • nuxtjs