NetLoony es una GUI para Apache open source que nos facilitará la administración de nuestro servidor web.
Inicialmente era un producto de pago, pero ahora es open source, lo cual es un importante paso. Desarrollado en Java nos permite entre otras cosas disponer de un monitor de rendimiento, control remoto, soporte para SSL, buscador de ficheros htaccess, editor de texto, scaner de puertos, backup y muchas cosas más.
NetLoony
VÃa / Apache-es
Interesantes consejos para optimizar nuestra base de datos en nuestras aplicaciones:
Una lectura interesante y más detallada.
Leyendo un comentario en una entrada de Minid.net, en el que preguntaba cómo redirigir a una url especÃfica según el idioma del navegador, se nos ha ocurrido explicarlo según lo harÃamos nosotros.
Se trata de que la url se redirija a otro directorio según el idioma que nos viene por la cabecera HTTP, por ejemplo: si accedemos a www.dominio.com y nuestro lenguaje es el español, que nos redirija a www.dominio.com/es, y si el idioma es el inglés que acceda a www.dominio.com/en. En nuestro caso, si el idioma no está en la lista de idiomas disponibles accederemos a un idioma por defecto (en).
Viendo diferentes empresas con página corporativa, he visto que suele ser común el área para los clientes. En este mundo es normal que el tema de los pagos suela dar complicaciones, por eso yo creo que es preferible subir lo que se va desarrollando para el cliente en un servidor propio que en el servidor del cliente, ya que hasta que no pague en su totalidad, no dispone de ello.
Si te encuentras en esta situación, quizás te sea útil este truco para habilitar una área privada protegida para los clientes, la cual redireccionará al contenido del cliente, ya sea el propio trabajo en sà o una aplicación en particular.
Para el caso del ejemplo, yo lo he hecho para unas páginas web estáticas, y luego que cada cual, si le interesa, que lo adapte a su gusto.
El funcionamiento es el siguiente: el usuario accede a una ruta con acceso restringido a usuarios válidos mediante Apache. También mediante Apache se le redirigirá a una página propia, en este caso las páginas HTML que están guardadas en un directorio especÃfico para clientes (fuera del webroot) y en un directorio especÃfico para ese cliente en concreto.
Supongamos que tenemos el directorio webroot siguiente home/www y el área web de clientes está en el directorio home/www/clientes y el espacio fÃsico especÃfico de clientes está en home/www/_clientes. Lo primero que debemos hacer es añadir el siguiente .htaccess en el directorio clientes.
AuthType Basic
AuthName "Acceso a clientes"
AuthUserFile [path]\passwords.conf
Require valid-user
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/clientes(.*)$
RewriteRule ^(.*)$ /_clientes/index.php?url=$1 [L,QSA]
Lo que hace esta configuración es añadir autenticación al directorio clientes y redireccionar al script index.php del directorio _clientes, pasándole como parámetro la url a la que se accede.
El script index.php para este ejemplo, lo que he hecho ha sido incrustar el fichero que se quiere directamente, teniendo en cuenta el Content-Type y que si no se añade ninguna url después de clientes se tome por defecto el fichero index.html.
<?php
// Devuelve el content-type
function content_type($url) {
$ext = substr($url, strrpos($url, '.')+1);
if ($ext == 'swf') {
header("Content-type: application/octet-stream");
} else if ($ext == 'png') {
header("Content-type: image/png");
} else if ($ext == 'jpg') {
header("Content-type: image/jpeg");
} else if ($ext == 'gif') {
header("Content-type: image/gif");
} else if ($ext == 'js') {
header("Content-type: text/javascript");
} else if ($ext == 'css') {
header("Content-type: text/css");
} else if ($ext == 'html') {
header("Content-type: text/html");
} else {
header("Content-type: text/plain");
}
}
// Obtengo el usuario y la ruta a la que quiere acceder
$user = $_SERVER['REMOTE_USER'];
$url = substr($_SERVER['REQUEST_URI'], strlen("/clientes"));
$url = $url == '/'? '/index.html' : $url;
// Añado el content-type
content_type($url);
// Inserto el fichero
if (file_exists('./'.$user.$url)) {
include './'.$user.$url;
}
?>Por supuesto a este truco le faltan cosas, como seguridad en el directorio _clientes, a parte de que hay que tener cuidado con los paths relativos o absolutos, y alguna cosilla más, pero creo que como idea desde la que partir no está mal.
El backend ya está algo configurado, por lo que voy a empezar a configurar el frontend.
Instalaré varias librerías:
En vez de ir instalando una a una, usando el siguiente package.json y ejecutando npm i, lo tendremos todo instalado.
{
"name": "hapi-frontend",
"version": "1.0.0",
"description": "Hapi.js frontend",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development --config webpack.config.dev.js",
"build": "webpack --mode production --config webpack.config.production.js"
},
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.4",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"css-loader": "^3.0.0",
"eslint": "^6.0.1",
"eslint-plugin-html": "^6.0.0",
"eslint-plugin-vue": "^5.2.3",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
"stylelint-webpack-plugin": "^0.10.5",
"vue-hot-reload-api": "^2.3.3",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"buefy": "^0.7.10",
"vue": "^2.6.10"
}
}
Como se puede ver, existen dos scripts dentro de npm: build que compila el js y extrae los CSS, y dev, que arranca el servidor de webpack habilitando HMR (🎶 ¡ya no puedo vivir sin él! 🎶).
Ambas configuraciones de webpack usan un script en común (webpack.config.common.js):
const webpack = require( 'webpack' );
const path = require( 'path' );
// Carga los ficheros .vue
const VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelint
const StyleLintPlugin = require( 'stylelint-webpack-plugin' );
// Para obtener un path para los alias
function resolve( dir ) {
return path.join( __dirname, '.', dir );
}
module.exports = {
mode: 'production',
// Fichero inicial del proyecto
entry: './js/main.js',
// Fichero final para incluir
output: {
filename: 'js/main.js',
publicPath: '/dist/',
},
module: {
// Reglas para los ficheros
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new StyleLintPlugin( {
files: [ '**/*.{vue,htm,html,css,sss,less,scss,sass}' ],
} ),
],
resolve: {
extensions: [ '.js', '.vue', '.json' ],
alias: {
'@': resolve( '' ),
},
},
};El frontend se gestiona desde el fichero main.js, que inicializará Vue y añadirá el componente principal:
import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import App from './components/App.vue';
import '@/assets/scss/main.scss';
Vue.use( Buefy );
new Vue( {
el: '#app',
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
// accept replacement modules
if ( module.hot ) {
module.hot.accept();
}Y ya por último el componente App.vue, que muestra simplemente un poco de HTML
<template>
<header class="hero">
<div class="hero-head">
<h1>{{ title }}</h1>
</div>
</header>
</template>
<script>
export default {
data() {
return {
title: "Demo site",
};
},
};
</script>
<style lang="scss" scoped>
div {
h1 {
color: #fff;
}
}
</style>
Bueno, ha sido un resumen rápido, pero bajándote el código seguro que lo entiendes fácil