Configuración de htaccess y para qué nos sirve
Muchas veces hacemos nuestra página web en local, todo funciona bien, pero en el momento de subir a nuestro servidor, vemos que necesitamos hacer otro tipo de configuraciones, es aquí donde dices, pero qué diablos tengo que hacer! .
htaccess es un pequeño documento que usa los servidores de apache, donde haces algunas configuraciones extras, ya sea para que nuestros documentos se cargen mas rapido, o simplemente para hacer una redireccion. no entrare a fondo porque la verdad tampoco domino al 100%.
Así que en el transcurso de los años, tengo una plantilla y tambien he tomado algunos ejemplos de internet y prácticamente tenemos un htaccess para todo tipo de web.
Así que sin más voy a compartir
Configuración de htaccess para pasar http a https
Si necesitamos hacer este cambio, y toda nuestra web va a cambiar de http a https porque ahora tenemos un certificado ssl, entonces usaremos esto en nuesto .htacess
<IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTPS} !=on RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule>
redireccion con htaccess para subdominios
He estado probando un poco con esto, pero un amigo me dio la solución, si tenemos una pagina con https como este blog, pero creamos un subdominio, el ssl no cubre ese subdominio, asi que hay de dos, nos aparece esto
o nos aparece esto
entonces la solucion fue la siguiente gracias a @genitalico y que de hecho implementa en su página web
<IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{SERVER_PORT} 80 #Exclude subdomain from rewrite rule RewriteCond %{REQUEST_URI} !^/laventana/ RewriteCond %{HTTP_HOST} !=laventana.unprogramador.com [NC] #rewrite the url to force the use of https RewriteRule ^(.*)$ https://unprogramador.com/$1 [R=301,L] </IfModule>
con esto estamos diciendo que por ejemplo si entramos a laventana.unprogramador.com este subdominio se va a ver en http, pero si entran a unprogramador.com se vera con https.
Configurar Angular en servidor apache
Algo que me dio mucho dolor de cabeza, esque angular necesita una regla para no recargar en el servidor, así como para que sirva el router.
esto se soluciona con el siguiente configuración de htaccess.
# Router Angular # RewriteEngine on RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^(.*) /index.html [NC,L]
Quitar www en páginas web con htaccess
Algo muy común es que los usuarios están acostumbrados a usar www, pero www en sí es un subdominio que se acostumbro usar en los años 90, actualmente no se usa o es opcional, para que nuestra web no falle podemos usar este redireccionamiento.
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_URI} !^/(robots\.txt|favicon\.ico|sitemap\.xml)$ RewriteCond %{HTTP_HOST} !^cesarflores\.xyz$ [NC] RewriteRule ^(.*)$ http://cesarflores.xyz/$1 [R=301,L] </IfModule>
Comprimir archivos usando GZIP
para mejorar la respuesta del servidor, y si contiene el modulo de gzip podemos usar la siguiente configuración de htaccess, esta configuración lo escribimos para una página de wordpress hace unos años y mejora mucho las respuestas del servidor.
# Compresión GZIP con mod_gzip <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl|jpeg|png)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule> #fin gzip
Cache en el servidor por htaccess
Algo muy importante es guardar cosas en caché, por ejemplo cuando entrar a unprogramador.com y es la primera vez que entran, la carga es un poco más lenta, pero si entran el dia de mañana, será mucho más rápido ya que tenemos cache guardada.
en este caso estas son las cabecera que daremos de alta
<IfModule mod_mime.c> AddType text/css .css AddType text/x-component .htc AddType application/x-javascript .js AddType application/javascript .js2 AddType text/javascript .js3 AddType text/x-js .js4 AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType image/svg+xml .svg AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType image/webp .webp AddType application/json .json AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.ms-opentype ._otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType image/svg+xml .svg .svgz AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType application/vnd.ms-opentype ._ttf AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/font-woff .woff AddType application/font-woff2 .woff2 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip </IfModule>
Si ustedes no usan estos archivos o usan otra extensión pueden ir agregandolo para mejorar su experiencia.
y vamos a usar las siguientes “sentencias” para dar un mejor rendimiento en nuestro servidor, aclaro que esto fue supervisado y probado con un técnico en servidores de mi antiguo trabajo.
<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/webp A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font-woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule> <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon image/webp application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel <IfModule mod_mime.c> # DEFLATE by extension AddOutputFilter DEFLATE js css htm html xml </IfModule> </IfModule> <FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$"> FileETag MTime Size <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public" Header unset Set-Cookie Header set X-Powered-By "W3 Total Cache/0.9.6" </IfModule> </FilesMatch> <FilesMatch "\.(html|htm|rtf|rtx|svg|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|TXT|XSD|XSL|XML)$"> FileETag MTime Size <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary Header set Pragma "public" Header append Cache-Control "public" Header set X-Powered-By "W3 Total Cache/0.9.6" </IfModule> </FilesMatch> <FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$"> FileETag MTime Size <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public" Header unset Set-Cookie Header set X-Powered-By "W3 Total Cache/0.9.6" </IfModule> </FilesMatch> <FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|webp|json|mdb|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|WEBP|JSON|MDB|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$"> <IfModule mod_headers.c> Header unset Last-Modified </IfModule> </FilesMatch> # END W3TC Browser Cache
Aquí una observación, estas dos secciones tienen que ir en el archivo .htaccess ya que una son las cabeceras de los archivos a comprimir y luego como va a ser compresas
Cache para wordpress con htaccess
# BEGIN W3TC Page Cache core <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{HTTP:Accept-Encoding} gzip RewriteRule .* - [E=W3TC_ENC:_gzip] RewriteCond %{HTTP_COOKIE} w3tc_preview [NC] RewriteRule .* - [E=W3TC_PREVIEW:_preview] RewriteCond %{REQUEST_METHOD} !=POST RewriteCond %{QUERY_STRING} ="" RewriteCond %{REQUEST_URI} \/$ RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|w3tc_logged_out|wordpress_logged_in|wptouch_switch_toggle) [NC] RewriteCond "%{DOCUMENT_ROOT}/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" -f RewriteRule .* "/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" [L] </IfModule> # END W3TC Page Cache core # BEGIN WordPress
Tiempo del cache
esta parte del htaccess es muy importante y es muy configurable, el que aparece a continuación tiene un caché de 1 mes pero pueden configurarlo a días o a años depende que se esté programando.
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 month" ExpiresByType image/jpeg "access 1 month" ExpiresByType image/gif "access 1 month" ExpiresByType image/png "access 1 month" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access plus 1 month" </IfModule> ## EXPIRES CACHING ##
Mostrar el dominio sin la etiqueta index
Hay veces que tenemos unprogramador.com/index.php, esta url aunque no está mal (ya que todo se redirecciona al index) pero no se ve estetico, para estos caso vamos a redireccionar y quitar index.php
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
funciona igual para index.html solo deben cambiar la extensión.
Si ustedes han usado otra configuración de htaccess, o saben como hacerlo más eficiente no duden en comentar y que tengamos más recursos para compartir.