VueJS 2 – dostęp do konfiguracji środowiska

W każdym co bardziej złożonym projekcie zachodzi potrzeba przechowywania różnych konfiguracji w zależności od środowiska: developerskiego, produkcyjnego, testowego, eksperymentalnego, niebieskiego i każdego innego. Oczywiście framework VueJS nie odstaje od normy i również oferuje możliwość takiej konfiguracji.

Na początku od razu zaznaczam, że zmiany w plikach konfiguracyjnych lub tworzenie nowych plików wymaga ponownego przebudowania i uruchomienia aplikacji – brak odzwierciedlania jakichkolwiek zmian w aplikacji może się okazać dość frustrujące jeśli zapomnimy o tej czynności – a często w konsoli widzimy, że się przebudowało – tylko jednak coś zmian z konfiguracji nie chwycił.

Konfiguracja dla różnych środowisk przechowywana jest domyślnie w 3 plikach (po utworzeniu czystego projektu):

	./projekt/config/prod.env.js
	./projekt/config/dev.env.js
	./projekt/config/test.env.js

view raw

vuejs.default.config.files.txt

hosted with ❤ by GitHub

Wyżej wymienione pliki ładowane są dokładnie w tej kolejności ewentualnie rozszerzając lub nadpisując dotychczasowe wartości zmiennych, więc w czystej instalacji na początku wczytywany jest plik prod.env.js, stałe w nim zawarte nadpisywane są plikiem dev.env.js a te z kolei test.env.js. Proste i logiczne (…długie jak drzewo genealogiczne naszej rasy…)

Oczywiście nic nie stoi na przeszkodzie aby, jeśli zajdzie taka potrzeba, dodawać swoje pliki konfiguracyjne definiujące ustawienia dla nowych środowisk. Np. staging – dodając przykładowo plik staging.env.js o przykładowej treści:

	'use strict';
	const merge = require('webpack-merge');
	const prodEnv = require('./prod.env');
	module.exports = merge(prodEnv, {
	NODE_ENV: '"staging"',
	API_URL: '"http://staging-api.server.com/"'
	});

view raw

staging.env.js

hosted with ❤ by GitHub

i wtedy np. w pliku dev.env.js rozszerzamy środowisko stagingEnv – a nie prodEnv jak to jest domyślnie.

Samo ustawienie bieżącego środowiska – wg którego budowany i uruchamiany jest VueJS odbywa się w pliku ./projekt/src/main.js w linijce:

Vue.config.productionTip = false;

view raw

vuejs.setup.environment.config.js

hosted with ❤ by GitHub

chociaż lepszą z praktycznego punktu widzenia wersją byłaby poniższa:

Vue.config.productionTip = process.env.NODE_ENV === 'production';

view raw

vuejs.setup.environment.config.2.js

hosted with ❤ by GitHub

I teraz, jeśli zawsze (we wszystkich środowiskach) potrzebujemy w aplikacji jakieś stałe to definiujemy je w pliku prod.env.js odpowiednio nadpisując w pozostałych plikach, jeśli oczywiście jakieś zmiany będą potrzebne.

W komponentach nic nie musimy importować, a dostęp do zmiennej jest wygląda w taki sposób: process.env.API_URL

Jeśli zbudujemy teraz projekt dla odpowiedniego środowiska, np.: dla produkcji npm run build otrzymamy katalog dist, w którym to znajduje się zbudowana chwilę temu aplikacja. Przechodząc w linii poleceń do tego katalogu cd ./projekt/dist i uruchamiając tymczasowy serwer python3 -m http.server 8181, w przeglądarce pod adresem 127.0.0.1:8181 powinna być dostępna nasza aplikacja – warto w tym miejscu potwierdzić różniące się między środowiskami zmienne, żeby nie było nieprzyjemnych niespodzianek.

PhpMyAdmin – konfiguracja autologowania

Po ściągnięciu najnowszej wersji PhpMyAdmin praktycznie każda próba wejścia do panelu będzie wymagała od nas podania loginu i hasła. Na komputerach developerskich często jest to niewielkie utrudnienie. Aby logowanie następowało automatycznie należy:
1. Otwieramy plik PhpMyAdmin/libraries/config.default.php, gdzie PhpMyAdmin to lokalizacja panelu na serwerze.
2. Zmieniamy wartość:

$cfg['Servers'][$i]['host'] = 'localhost'; // lub odpowiednia nazwa hosta, o ile wcześniej nie była ustawiona

3. Zmieniamy wartość:

$cfg['Servers'][$i]['auth_type'] = 'config'; // wcześniej cookie

4. Zmieniamy wartość:

$cfg['Servers'][$i]['user'] = 'mysql_username'; // nazwa użytkownika, najczęściej root

5. Zmieniamy wartość:

$cfg['Servers'][$i]['password'] = 'mysql_password'; // hasło użytkownika, najczęściej użytkownika root

6. Wchodzimy na stronę PhpMyAdmin na naszym serwerze i powinniśmy automatycznie być zalogowani.