2024年4月10日水曜日

自分のサーバーにサイト追加する方法(自分でサーバーいじる場合)

こんばんは、こうちゃんです。

自分でサイトを持っていて運営している際などに、主にVPSのような自分で構築したサーバーでサイトを増やす手順です。

ある程度マニアックな情報になってしまいますが、
私自身がサイトを増やす際のマニュアル、覚書的に役立てるためと、
同じような状況で、まだあまり慣れていない方に役立つように、作業メモを残しておきます。

サイト追加手順
※ドメイン取得サイトはどこか定番大手などでアカウント登録して使ってください

1.ドメイン管理サイトにて希望するURLになる新ドメイン取得

2.DNS設定でレコード追加
基本的には、Aレコードで自身の持っているサーバーのIPアドレスに向ける(サーバー管理会社がドメイン設定を指定している場合はそれに従う)
 A サーバーIPアドレス

3.ネームサーバ設定はほとんどのドメイン管理会社で設定不要だが、明示するように書いてある場合はその使用しているドメイン管理会社のネームサーバーを使用するように設定

4.FTPソフト等を使い、WEB用アップフォルダに新ドメイン名等でフォルダを作成し、コンテンツアップロード

(以降サーバーにssh接続でコマンドライン)
5./etc/httpd/conf.d/virtualhost.conf編集
新ドメイン用設定書き加え(↓はfuelの場合、一般サイトなら/public/は不要)
<VirtualHost *:80>
DocumentRoot /var/www/html/ドメイン名/public/
ServerName ドメイン名
</VirtualHost>

6.service httpd restart で新ドメインにアクセスして見えることを確認

↑単にhttp://ドメイン名で新サイトを見るだけの場合はここまでで完了
↓新サイトをさらにssl化してhttps://ドメイン名でアクセスできるようにする場合以下も実行

7.ssl証明書発行&インストール
cd /etc/letsencrypt/
./letsencrypt-auto certonly --webroot -w ドキュメントルート(fuelなら/publicまで含む/) -d ドメイン名
※サーバーのPythonバージョンが低くてエラーが出る場合、Python2.7を有効に↓してから上記コマンド実行
sudo scl enable python27 bash

8.https設定
vi /etc/httpd/conf.d/ssl.conf
既存https設定のブロックをコピーしてドメイン名だけ書き換えて追加(↓具体例)
<VirtualHost *:443>
   ServerName ドメイン名
   DocumentRoot "/var/www/html/ドメイン名/public"

   SSLEngine on
   SSLHonorCipherOrder on
   Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"
   SSLProtocol all -SSLv2
   SSLCipherSuite DEFAULT:!EXP:!SSLv2:!DES:!IDEA:!SEED:+3DES

   SSLCertificateFile /etc/letsencrypt/live/ドメイン名/cert.pem
   SSLCertificateKeyFile /etc/letsencrypt/live/ドメイン名/privkey.pem
   SSLCertificateChainFile /etc/letsencrypt/live/ドメイン名/chain.pem

    <Directory "/var/www/html/ドメイン名/public">
        Options FollowSymLinks
        AllowOverride All
    </Directory>

    SetEnvIf Request_URI "\.(gif|jpg|png|css|js)$" nolog
    ErrorLog logs/ssl_error_log
    CustomLog logs/ssl_access_log combined env=!nolog

</VirtualHost>

9.サーバー再起動
service httpd restart
https//ドメイン名/でエラーなく見れるか確認

10.SSL証明書は3ヶ月で切れるので毎月初日に自動更新
crontab -e

最終行に追加
00 04 01 * * /etc/letsencrypt/letsencrypt-auto certonly --webroot -w /var/www/html/ドメイン名/public/ -d ドメイン名 --renew-by-default && /etc/init.d/httpd restart

※前の手順でpythonのバージョンエラーなど出てた場合、このコマンド時にもpythonのエラーによりうまく動かない可能性もあります。
その場合、crontab自体に、pythonの強制コマンド入りで登録しましょう

00 04 01 * * sudo scl enable python27 bash && /etc/letsencrypt/letsencrypt-auto certonly --webroot -w /var/www/html/ドメイン名/public/ -d ドメイン名 --renew-by-default && /etc/init.d/httpd restart

これでほぼOKのはずですが、ちゃんと証明書が更新されたかなどは、crontab自体が動いたかの確認と、実際のサイトで証明書日付の確認などをしましょう(まあ一回ちゃんと動いたのを確認すればほぼ大丈夫ですが)。

vi /var/log/cron
などでcrontabのログを確認できます。
少し古い場合、/var/logフォルダ内を探して cron日付-日付になっていたりするのが過去ログ分です。


ドメイン引っ越しの場合
上記手順で引っ越し先のドメインでサイトを見れるようになったら、
引っ越し元ドメインのルート(URL叩いたら見れる階層)に、
.htaccess ファイルを作成し、中身を
Redirect permanent / 引っ越し先URL
と書いてアップ、これでURLを構造ごと転送がかかるようになる
こうしないと、全ページ、新URLのトップに転送とかかけちゃうとインデックスや各ページのSEO評価が引き継がれなくなってしまう

以上のような流れで新サイトをサーバーに追加できます。
もちろん既存のサーバー設定等で必ずしも上記通りにいくとは限りませんが、かなりの部分で参考にはなると思います。

こうちゃん

2024年4月3日水曜日

SVGファイル

こんばんは、こうちゃんです。

昨今人気の画像ファイル形式のSVGファイルですが、
拡大・縮小しても画質が劣化しない、とレスポンシブデザインのサイトなどに親和性がよいため、広く普及してきています。

このSVGファイルとはどのようなものか、などを今日はご説明していこうかと思います。

SVGファイルとは、Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、
webサイトで多くのケースで使われているJPG、PNG、GIFなどの画像ファイルが、ラスタ形式なのに対して、SVGはベクトル形式の画像です。
これは、ラスタ形式のJPGファイルなどは、画像の中身を、ピクセルを縦横に並べる方法で記録しており(言うなれば座標毎に色をふっているような)、そのため、画像を拡大すると粗くなり、縮小すると、欠けてしまったりします。
作ったサイズから変えるのに不便で、サイト等で使うと、パソコンで見た時には普通なのに、残念ながらスマホで見ると拡大されてギザギザの粗が目立つ、なんてこともよくあります。
それに対して、ベクトル形式でできているSVGファイルは、XMLベースの二次元画像データで、画像の情報を座標を結ぶ直線などの情報で記録しているため、拡大・縮小しても劣化が起きにくい形式です。
サイトなどでレスポンシブデザインを使い、パソコンやスマホなど画面解像度の異なる環境で見られる機会の多い近年のwebサイトに対してとても相性がよいです。

SVG(Scalable Vector Graphics)ファイルの魅力はいくつかあります。以下にそのいくつかを挙げてみます:

1. **拡大縮小に対応**: SVGファイルはベクター形式であり、画像を拡大・縮小しても画質が劣化せず、クリアな表示が可能です。これは、Webデザインや印刷物など、さまざまな用途で重要です。

2. **編集しやすい**: SVGファイルはテキストベースで記述されているため、編集が容易です。SVGファイルをテキストエディタで開いて編集することができ、色や形状、サイズなどを自由に変更できます。

3. **アニメーションやインタラクティブ要素の追加**: SVGファイルにはアニメーションやインタラクティブな要素を追加することができます。これにより、Webサイトやアプリケーションで動的なコンテンツを作成することが可能です。

4. **軽量化**: SVGファイルは一般的に他の画像形式よりもファイルサイズが小さく、高品質な画像を提供できるため、Webサイトのパフォーマンス向上にも貢献します。

5. **検索エンジン最適化(SEO)**: SVGファイルはテキストベースであるため、検索エンジンがコンテンツを理解しやすく、SEOの観点からも有利です。

これらの特性により、SVGファイルは多くのデザイナーや開発者にとって魅力的なファイル形式となっています。

そんなSVGファイルですが、時に事情により(使用できるファイルフォーマットが限られるなど)、JPGファイルなどと形式を変換する必要が出てくる場面もあり、そのような時は、SVGファイルを作成できるIllustratorやphotoshopなどで変換することもできますが、そもそもソフトを持っていなかったりソフトを起動して変換する手間を考えると、web上でできてしまうと大変便利で、
最近ではそうしたサービスを行ってくれる(しかも無料)サイトも登場しています。

https://www.aconvert.com/jp/image/svg-to-jpg/

画像ファイルをそのフォーマットから、好きな形式に変えてくれる、しかも、ネット上に挙がっている画像でもOKという、大変便利な夢のようなサービスです。

よろしければ画像形式の違いに悩んだ際などにはご利用してみてください。



こうちゃん