| ... | ... | @@ -181,33 +181,41 @@ CORS_ORIGIN_WHITELIST = [ |
|
|
|
|
|
|
|
Un cop configurada l'aplicació de React per poder generar diferents paquests distribuibles, **haurem d'implementar al WordPress de Som Connexió la lògica que permeti carregar els scrits generats i instanciar l'aplicació a les seves pàgines**.
|
|
|
|
|
|
|
|
Per tal d'acomplir això proposem generar un petit plugin amb PHP. Aquest plugin haurà de disposar dels scripts transpilats de React i definir un [shortcode](https://developer.wordpress.org/plugins/shortcodes/). A l'entorn WordPress, un _shortcode_ és una macro que s'utilitza per generar interaccions dinàmiques amb el contingut. p.e. creant galeries d'imàtges vinculades a un post o renderitzant un video. En el nostre cas, el _shortcode_ permetrà a l'usuari fer-ne ús des de l'editor de WordPress per que en el moment de renderitzat, WordPress substitueixi el codi del _shortcode_ per l'element HTML que farà d'arrel de la nostra aplicació alhora que s'informa a WordPress de la necessitat de carregar el _script_ amb el codi de React transpilat.
|
|
|
|
|
|
|
|
|
|
|
|
#### Codi PHP del plugin
|
|
|
|
```php
|
|
|
|
add_action('wp_enqueue_scripts', 'wp_react_enqueue_scripts');
|
|
|
|
function wp_react_enqueue_scripts()
|
|
|
|
{
|
|
|
|
wp_register_script(
|
|
|
|
'wp-react',
|
|
|
|
plugin_dir_url(__FILE__) . '/js/wp-react/index.js',
|
|
|
|
[],
|
|
|
|
WP_REACT_VERSION,
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
add_shortcode('wp_react_dom', 'wp_react_dom');
|
|
|
|
function sc_wp_react_dom()
|
|
|
|
{
|
|
|
|
enqueue_script('wp-react');
|
|
|
|
return '<div id="wp-react-root></div>';
|
|
|
|
}
|
|
|
|
```
|
|
|
|
Per tal d'acomplir això s'ha generat un petit plugin amb PHP. El codi del plugin es pot trobar en aquest [repositori de gitlab](https://git.coopdevs.org/coopdevs/som-connexio/oficina-virtual/wp-react/). Aquest plugin implementa, a l'entorn de WordPress, les següents funcionalitats:
|
|
|
|
|
|
|
|
1. **Un endpoint per desplegar els scripts transpilats de React i allotjar-los al sistema d'arxius de la pàgina web**. Aquest endpoint ens permet automatitzar les rutines de publicació de canvis a l'aplicació de l'oficina virtual a l'entorn de WordPress. WordPress espera una connexió de tipus POST amb un contingut codificat com a `multipart/form-data`. Aquest tipus de codificació ens permet barrejar al cos de la petició camps de tipus text (les credencials) i camps de tipus binari (els arxius). Dins el cos de la petició hauran de venir definits dos camps per a les credencials, l'usuari i la password, i un nombre variable d'arxius javascript. L'endpoint està protegit amb una capa d'autenticació que treball sobre el sitema d'usuaris intern de WordPress i utilitzarà el xifrat SSL de les connexions HTTPS per securitzar les credencials que s'enviin. Un cop validades les credencials contra el sistema d'usuaris de WordPress, el sistema netejarà la ruta on emmagatzema els scripts de React i els substituirà pels arxius adjuntants al cos de la connexió.
|
|
|
|
|
|
|
|
```sh
|
|
|
|
curl \
|
|
|
|
-F username=wpuser \
|
|
|
|
-F password=wppass \
|
|
|
|
-F app=@main.179b493c.chunk.js \
|
|
|
|
-F runtime=@runtime-main.cc85cbej.js \
|
|
|
|
-F chunk=@2.608ccbe5.js \
|
|
|
|
https://somconnexio.coop?wp_react_upload=1
|
|
|
|
```
|
|
|
|
|
|
|
|
2. **Un [shortcode](https://developer.wordpress.org/plugins/shortcodes/) per a la injecció del node arrel de l'aplicació així com la càrrega dinàmica de scripts**. A l'entorn WordPress, un _shortcode_ és una macro que s'utilitza per generar interaccions dinàmiques amb el contingut. p.e. creant galeries d'imàtges vinculades a un post o renderitzant un video. En el nostre cas, el _shortcode_ permetrà a l'usuari fer-ne ús des de l'editor de WordPress per que en el moment de renderitzat de les pàgines, WordPress substitueixi la macro del _shortcode_ per l'element HTML que farà d'arrel de la nostra aplicació alhora que s'informa a WordPress de la necessitat de carregar el _script_ amb el codi de React transpilat i el script de muntatge.
|
|
|
|
|
|
|
|
3. **Un script de javascript encarregat de muntar l'aplicació al DOM en temps d'execució**. Aquest script exposa a, a l'entorn javascript vinculat a la pàgina de WordPress en que s'estigui fent ús de l'aplicació de React, un objecte global anomenat **wpReact**. Aquest objecte té la següent interfície `wpReact = { startApp: ({ el: HTMLNode, route: String }) => {} }`. El mètode `startApp` de l'objecte ha de ser sobreescrit per React en temps d'execució i definir-lo com a funció de muntatge de l'aplicació. El script s'encarregarà de fer de proxy, a través d'aquest mètode, per tal de fer arribar a React el node arrel i la ruta del router a mostrar així com d'actualitzar el component _hash_ de la url per preconfigurar-lo abans d'inicialitzar el ruter de React.
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
window.wpReact.startApp = ({ el }) => {
|
|
|
|
ReactDOM.render(
|
|
|
|
<HashRouter>
|
|
|
|
<App />
|
|
|
|
</HashRouter>,
|
|
|
|
el
|
|
|
|
);
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
## Automatització i integració contínua
|
|
|
|
|
|
|
|
Per a la transpilació automatitzada dels diferents paquets distribuibles farem ús del sistema d'integració continua de Gitlab.
|
|
|
|
Per a la transpilació automatitzada i el desplegament dels diferents paquets distribuibles farem ús del [sistema d'integració continua de Gitlab](https://about.gitlab.com/topics/ci-cd/). El repositori de l'aplicació ja disposa d'aquest sistema configurat per a l'automatització dels tests funcionals. La nova configuració implementa una nova _pipeline_ que automatiza tot el cicle de publicació de les versions de codi. Aquesta pipeline anirà vinculada a la creació de nous _tags_, el sistema de versionat del repositori git. Per a cada _tag_ es farà disponible una _pipeline_ encarregada d'executar, sobre la versió de codi concreta vinculada al _tag_, el procés de transpilació, publicació com a paquet i, de forma opcional, desplegament automàtic a l'entorn de WordPress.
|
|
|
|
|
|
|
|
Els runners de gitlab disposaran de configuració variable en funció de l'entorn per al que s'estigui executant el procés: _staging_ o _productiu_. Per a aquesta configuració variable es defineixen, dins el sistema de CI/CD de Gitlab, els mateixos entorns, _staging_ i _production_, i es fa ús de [les variables d'entorn](https://docs.gitlab.com/ee/ci/variables/) vinculades a un o altre. Aquestes variables d'entorn s'encarregan de modificar el comportament de la _pipeline_ per ajustar-lo als requeriments variables entre entorns.
|
|
|
|
|
|
|
|
Per últim, s'utilita un sistema de reconeixement de patrons sobre el text del _tag_ per apuntar a un o altre entorn. Els _tags_ del projecte segueixen el patró `v?[0-9]+[.][0-9]+([.][0-9]+)?([-a-z])*`. Els _tags_ sense sufix s'entenen com a marcas de versió productives, els _tags_ amb el sufix `-staging` s'entenen com a marques de versions per a l'entorn de proves. La creació de nous _tags_ dispararà l'activació de la _pipeline_ vinculada a un o altre entorn.
|
|
|
|
|
|
|
|
Per a l'automatizació del procés de desplegament farem ús d'un nou rol d'Ansible que configurarem ad-hoc per resoldre la nova casuística. |
|
|
\ No newline at end of file |
|
|
|
L'últim _job_ de la _pipeline_ és el de desplegament. Aprofitant el sistema de _runners_, s'ha definit una rutina que permet automatizar el desplegament del codi des de Gitlab. Aquest requereix que el procés d'execució conegui la URL on fer la petició i les credencials d'un usuari al sistema de WordPress. Amb aquesta informació accessible a través de les variables d'entorn, el procés es capaç de connectar-se a WordPress a través d'una connexio HTTP i desplegar l'última versió de codi transpilat. |
|
|
\ No newline at end of file |
