First, you will need to prepare source code for your Laravel Vue application. If you are not in such my case which means no source code. Thus, you can get source code from Github or any remote repository by using Git clone.
I. Launch Laravel Vue application
There are some manipulations to clone and run Laravel & Vue project in local machine. You can follow the steps as below:
// Install all vendor from composer.json
composer installl
// Install all dependencies from package.json
npm install
// Create APP_KEY for Laravel
php artisan key:generate
// Run migrations to create all your database tables
php artisan migrate
// Start artisan server for the Laravel backend. Default port is 8000
php artisan serve
// Compile the front end files
npm run dev(prod)
For example, our application show up after going through some steps as above:
Note: Using curl <Web URL> to to check health check of web page. In other hands, you can use the curl command to check HTTP or HTTPS established successfully?
II. Upload source code to VPS on Ubuntu
For this guideline, you need to purchase and setup VPS in advance. Then, grant permission for Secure Shell (SSH) to access folder of Operating system without UI.
ssh flagtick@10.11.11.51
Note: In the context of our tutorial, we use internal IP address. Hence, to access the IP by SSH from your local machine. We need to use VPN tool or Remote Desktop Connection.
- Forticlient VPN: https://www.fortinet.com/support/product-downloads#vpn
- OpenVPN: https://openvpn.net/client-connect-vpn-for-windows/
XAMPP is group of open-source software that is typically installed together to enable a server to host dynamic websites and web apps. Hence, come along with Apache, MySQL, PHP need to integrate LAMP on Ubuntu.
sudo apt update
sudo apt install apache2
Be sure that your Firewall allows HTTP and HTTPS traffic.
sudo ufw app list
Note: If you look at the Apache Full profile details, you’ll see that it enables traffic to ports 80 and 443. Use the following command to get information for "Apache Full" and enable if it does not allow.
sudo ufw app info "Apache Full"
sudo ufw allow "Apache Full"
In some cases, if you want point domain name to IP of VPS. You should find your Server's public IP Address. The configuration will modify in /etc/hosts file.
// Using dig Utility
dig +short myip.opendns.com @resolver1.opendns.com
// Using host Utility
host myip.opendns.com resolver1.opendns.com | grep "myip.opendns.com has" | awk '{print $4}'
// Using wget Command Line Downloader
wget -qO- http://ipecho.net/plain | xargs echo
wget -qO - icanhazip.com
// Using cURL Command Line Downloader
curl ifconfig.co
curl ifconfig.me
curl icanhazip.com
At this point, you can perform to check Apache server status and reload Apache server.
sudo systemctl status apache2
sudo systemctl restart apache2 && sudo service apache2 reload
If you want to use domain name instead of Server's IP public, then you need to clone /etc/apache2/sites-available/000-default.conf into another. For example: flagtick.com.conf which created as below:
sudo cp 000-default.conf flagtick.com.conf
sudo nano flagtick.com.conf
Next, configure domain name in Apache server based on flagtick.com.conf file. The configuration is established for HTTP running on port 80.
<VirtualHost *:80>
ServerAdmin [email protected]
ServerName flagtick.com
ServerAlias www.flagtick.com
DocumentRoot /var/www/flagtick
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Note: You need to create folder flagtick in var/www/ where located source code. In some cases, we will need some advance features to support HTTPs or run Node.js application at port 3000. You can follow the fully code here:
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
#ServerName www.example.com
ServerAdmin webmaster@localhost
ServerName flagtick.com
ProxyRequests Off
ProxyPreserveHost On
ProxyVia Full
<Proxy *>
Require all granted
</Proxy>
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
ServerAlias www.flagtick.com
DocumentRoot /var/www/flagtick
ServerName flagtick.com
Redirect / https://flagtick.com
<Directory "/var/www/flagtick">
AllowOverride All
</Directory>
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf
</VirtualHost>
<VirtualHost *:443>
ServerName flagtick.com
DocumentRoot /var/www/flagtick
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
SSLEngine on
SSLCertificateFile /etc/ssl/certs/apache-selfsigned.crt
SSLCertificateKeyFile /etc/ssl/private/apache-selfsigned.key
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
Finally, we will enable the new virtual host files
sudo a2ensite flagtick.com.conf
You can totally disable the default site defined in 000-default.conf as below:
sudo a2dissite 000-default.conf
Once you have launch application successfully, let carry out of zip the all of files in sourcecode folder which excluding node_modules folder. Use scp command to upload sourcecode.zip into remote VPS by using Secure Shell (SSH).
scp -r sourcecode.zip [email protected]:/var/www/html
Conduct to install unzip and unzip sourcecode.zip file with following command:
sudo ap install unzip && unzip sourcecode.zip
Note: Use sudo cp -r html/ flagtick_restore/ to clone folder html into another folder named flagtick_restore folder. If you encounter any problem and then can use it to get back to previous folders and files.
sudo cp -r html/ flagtick_restore/
To actually return the UI, we will need to setup mysql database and update it into .env file. Hence, use apt to acquire and install MySQL software from your VPS machine.
sudo apt install mysql-server
Now, we will create a new database named tkeyltdr_cogi in apache2 in path /etc/apache2/sites-available as below:
flagtick@webhome:/etc/apache2/sites-available$ sudo mysql -u root
[sudo] password for htcg:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.31-0ubuntu0.20.04.2 (Ubuntu)
Copyright (c) 2000, 2022, Oracle and/or its affiliates.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
> mysql CREATE database tkeyltdr_cogi
> mysql SHOW DATABASES
> mysql exit;
To change password of database whenever access.
> mysql ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'Flagtick@12345';
By now you should have installed MySQL and also securely configured it. You can access MySQL server using the root login and password.
sudo mysql -u root -p
Note: Enter new password (Here is Flagtick@12345).
III. Install phpMyAdmin
We need to handle the administration of MySQL over the Web. Hence, install phpMyAdmin that would be necessary for this case. What we need to open Terminal and run the following script to install:
sudo apt-get install phpmyadmin
Note: In the next step, select “Apache2” by press the spacebar on a keyboard. Then select “Yes” when asked whether to use dbconfig-common to set up the database.
Once you have installed phpMyAdmin successfully, let move to add the phpMyAdmin Apache configuration file into the /etc/apache2/conf-enabled/ directory. Before that, we will have to enable the “mbstring” PHP extension.
sudo phpenmod mbstring
Next, conduct to restart Apache2 to apply the changes.
sudo systemctl restart apache2
Switch its authentication method from “auth_socket” to “mysql_native_password”. That help to login to MySQL using root login:
sudo mysql -u root -p
mysql> SELECT user,authentication_string,plugin,host FROM mysql.user;
mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'Flagtick@12345';
mysql> FLUSH PRIVILEGES;
mysql> SELECT user,authentication_string,plugin,host FROM mysql.user;
Conduct to access phpmyadmin with Internal IP. Here is example to access after configuration: http://10.11.11.51/phpmyadmin/index.php. Please enter username/password - root/Flagtick@12345 to login into phpmyadmin as guiding above.
IV. Launch Laravel Vue Application
Laravel makes connecting with databases and running queries extremely simple. The database configuration file is app/config/database.php. Hence, to update database connection directly then let move to use .ENV file as below:
cd //
cd /var/www/html
sudo nano .env
ENV file looks like this:
...
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306g
DB_DATABASE=tkeyltdr_cogi
DB_USERNAME=root
DB_PASSWORD=Flagtick@12345
...
Because index.php located in public folder. Hence, we need to update 000-default.conf file in /etc/apache2/sites-available folder.
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
#ServerName www.example.com
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html/public
<Directory /var/www/html>
AllowOverride All
</Directory>
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf
</VirtualHost>
After that, set the necessary permissions to ensure the project runs smoothly:
sudo chgrp -R www-data /var/www/html/
sudo chmod -R 775 /var/www/html/storage
By default, Laravel is configured to create a single log file for your application, and this file is stored in /storage/logs/laravel.log. Hence, you can detect errors as below:
sudo chmod -R 0777 storage/log/laravel.log
echo "" > storage/logs/laravel.log
cat storage/logs/laravel.log
When you run the phpmyadmin from local, you should export database as sql file. After that let try to import directly in VPS to avoid losing data when run the website.
Next, import an SQL file using the command line in MySQL
mysql -u <Username> -p <Database Name> < <File Name>.sql
Note: For example, we has tkeyltdr_cogi.sql file then the syntax as mysql -u root -p tkeyltdr_cogi < tkeyltdr_cogi.sql. Finally, here is the result upon access http://portal.flagtick.com or http://10.11.11.51 on browser.
Or Internal IP address - 10.11.11.51.
Video
