Well in this world of Automation and AI, I am now going web base for my scripts and applications. I will be testing different version of front end on purpose.
Setting Up a Web Server on Ubuntu 22.04 LTS
To set up a web server on Ubuntu 22.04 LTS to host multiple applications with different front ends
like WordPress and React, you can follow these steps. This setup will use Nginx as a reverse proxy to route traffic
to different applications based on subdomains or paths. We’ll use Nginx, MySQL, Node.js, and PHP for this setup.
Step 1: Update and Upgrade System
First, make sure your system is up-to-date.
sudo apt update && sudo apt upgrade -y
Step 2: Install Nginx Web Server
Nginx will serve as a reverse proxy to handle incoming requests and route them to the correct application.
sudo apt install nginx -y
Start and enable Nginx:
sudo systemctl start nginx
sudo systemctl enable nginx
Step 3: Install MySQL (for WordPress)
WordPress requires a database, so install MySQL.
sudo apt install mysql-server -y
Secure the MySQL installation:
sudo mysql_secure_installation
Step 4: Install PHP (for WordPress)
WordPress requires PHP, so we’ll install PHP and necessary extensions.
sudo apt install php-fpm php-mysql -y
Step 5: Install Node.js (for React Application)
React applications require Node.js. We’ll install it and set up NPM to manage packages.
sudo apt install nodejs npm -y
Verify the installation:
node -v
npm -v
Step 6: Set Up WordPress
1. Download WordPress:
cd /var/www
sudo wget https://wordpress.org/latest.tar.gz
sudo tar -xvf latest.tar.gz
sudo mv wordpress your_wordpress_directory
2. Create MySQL Database for WordPress:
sudo mysql -u root -p
Inside the MySQL shell, run the following commands:
CREATE DATABASE wordpress_db;
CREATE USER ‘wp_user’@’localhost’ IDENTIFIED BY ‘your_password’;
GRANT ALL PRIVILEGES ON wordpress_db.* TO ‘wp_user’@’localhost’;
FLUSH PRIVILEGES;
EXIT;
3. Configure WordPress:
cd /var/www/your_wordpress_directory
sudo cp wp-config-sample.php wp-config.php
Edit the configuration file to set up the database details:
sudo nano wp-config.php
Update the following lines with your database information:
define(‘DB_NAME’, ‘wordpress_db’);
define(‘DB_USER’, ‘wp_user’);
define(‘DB_PASSWORD’, ‘your_password’);
4. Set Permissions:
sudo chown -R www-data:www-data /var/www/your_wordpress_directory
sudo chmod -R 755 /var/www/your_wordpress_directory
Step 7: Set Up React Application
1. Create a Directory for the React App:
cd /var/www
sudo mkdir react_app
cd react_app
2. Create a React App (If not already built):
npx create-react-app my-react-app
cd my-react-app
npm run build
3. Set Permissions:
sudo chown -R www-data:www-data /var/www/react_app
sudo chmod -R 755 /var/www/react_app
Step 8: Configure Nginx for Both Applications
1. Create Nginx Server Block for WordPress:
sudo nano /etc/nginx/sites-available/wordpress
Add the following configuration:
server {
listen 80;
server_name wordpress.yourdomain.com;
root /var/www/your_wordpress_directory;
index index.php index.html index.htm;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
}
location ~ /\.ht {
deny all;
}
}
2. Create Nginx Server Block for React App:
sudo nano /etc/nginx/sites-available/react_app
Add the following configuration:
server {
listen 80;
server_name react.yourdomain.com;
root /var/www/react_app/my-react-app/build;
index index.html;
location / {
try_files $uri /index.html;
}
}
3. Enable the Configurations and Test Nginx:
sudo ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/react_app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
Step 9: Access Your Applications
1. Go to http://wordpress.yourdomain.com to see your WordPress site.
2. Go to http://react.yourdomain.com to access your React app.
