Check Bitbucket Code EC2

### 1. **SSH into your EC2 instance**
First, you need to SSH into your EC2 instance using the terminal or an SSH client.

ssh -i /path/to/your/key.pem ubuntu@ec2-16-170-254-93.eu-north-1.compute.amazonaws.com

### 2. **Navigate to your project directory**
Once logged into your EC2 instance, navigate to the directory where your project is located (e.g., `/var/www/share`).

cd /var/www/share

### 3. **Check the Git status**
Run the following command to see if there are any uncommitted changes in the repository on your EC2 instance.

git status

If you see something like "Your branch is up to date with 'origin/main'," it means your local repository is up to date with the remote Bitbucket repository.

### 4. **Check the Git logs**
To verify that the latest code has been pushed, you can check the git logs.

git log --oneline --graph --decorate

This command will show you the commit history and you can see the most recent commits. Verify that the latest commit matches the code you've pushed from Bitbucket.

### 5. **Pull the latest changes (if needed)**
If you don’t see the latest code, or if the code is outdated, you can pull the latest changes from your Bitbucket repository:

git pull origin main

Replace `main` with your actual branch name if it’s different.

### 6. **Check the deployment pipeline (if automated)**
If you have set up an automated deployment process, such as using a CI/CD pipeline (e.g., Bitbucket Pipelines, Jenkins, etc.), you should check the pipeline logs to confirm that the deployment has been triggered and completed successfully.

– For **Bitbucket Pipelines**, go to your Bitbucket repository > `Pipelines` tab, and check the logs for successful deployments.

By following these steps, you should be able to confirm whether the latest code from your Bitbucket repository has been pushed to your EC2 instance.

### Possible Causes
1. **Incorrect Vite Environment**: Your application might be running in development mode, trying to connect to Vite's dev server (`http://127.0.0.1:5173`).
2. **Vite Build Files Missing**: The Vite assets may not have been properly built or deployed to your EC2 instance.
3. **Misconfiguration in `vite.config.js`**: The Vite configuration may be pointing to the local dev server instead of the production assets.

### Solution Steps

#### 1. **Build Your Vite Assets for Production**
Make sure to build your Vite assets using the following command on your local machine or directly on your EC2 instance:

yarn build
# or
npm run build

This will generate the production build files in the `dist` folder (or whatever output directory is defined in your `vite.config.js`).

#### 2. **Deploy the Build Files to Your EC2 Instance**
If you built the assets locally, upload the generated `dist` folder to your EC2 instance. You can use `scp` to securely copy files:

scp -i /path/to/your/key.pem -r dist ubuntu@ec2-16-170-254-93.eu-north-1.compute.amazonaws.com:/var/www/share/resources/js

Make sure that your `dist` files are in the correct path on the server.

#### 3. **Update Your `vite.config.js`**
Ensure your `vite.config.js` is correctly configured for production. Here's a sample configuration:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
  },
  server: {
    host: '0.0.0.0',
    port: 5173,
  },
  resolve: {
    alias: {
      '@': '/resources/js',
    },
  },
});

Make sure you don't have the `server` section active in your production environment.

#### 4. **Update `.env` File**
Ensure your `.env` file on the server is configured to use the production build. You should not have `VITE_SERVER_URL` pointing to `http://127.0.0.1:5173`. Update or remove the `VITE_SERVER_URL` variable if necessary:

APP_ENV=production
VITE_APP_URL=https://your-ec2-domain.com

Then, clear your configuration cache:

php artisan config:cache
php artisan optimize:clear

#### 5. **Restart Your Services**
After making these changes, restart your services to ensure they pick up the new configurations:

sudo systemctl restart nginx
sudo systemctl restart php8.3-fpm

Or restart the Laravel application if you're using a queue worker:

php artisan queue:restart

#### 6. **Check the Browser Console**
After deploying, open your website in a browser and check the console for any errors related to loading the Vue components. If you see a 404 error, it may indicate that the path to your assets is incorrect.

### Summary
– Build Vite assets for production.
– Ensure deployment to the correct folder on EC2.
– Verify your Vite and `.env` configurations.
– Restart necessary services.

These steps should help resolve the issue with your resources failing to load on EC2.

### 1. **EC2 Instance Type and Specs**
– **CPU and Memory**: Ensure you're using an EC2 instance with sufficient CPU and RAM. Low-powered instances like `t2.micro` or `t3.micro` may struggle with resource-intensive tasks like building a Vue.js project.
– **Disk I/O**: If you're using an EBS volume with lower performance, consider upgrading to a General Purpose SSD (`gp3`) or Provisioned IOPS SSD (`io2`).

**Solution**: Consider upgrading to a higher-tier instance, such as `t3.medium`, `t3.large`, or even a compute-optimized instance like `c5.large`.

# Check CPU and memory usage
   top

### 2. **Increase Memory for Node.js**
Sometimes, Node.js runs out of memory during the build process, causing it to slow down or crash. You can allocate more memory to Node.js by using the following command:

NODE_OPTIONS=--max_old_space_size=4096 npm run build

This allocates 4GB of RAM to the Node.js process. Adjust the value based on your instance's available memory.

### 3. **Use Production Build Flags**
Make sure your build process is optimized for production. In your `vite.config.js` or your build script, ensure that you're using production flags:

npm run build -- --mode production

### 4. **Enable Vite Caching**
Vite has a caching mechanism that can speed up subsequent builds. Ensure your Vite config enables caching:

// vite.config.js
   export default defineConfig({
     cacheDir: './node_modules/.vite',
   });

### 5. **Install Dependencies with `–production` Flag**
Before running the build, make sure to install only production dependencies:

npm install --production

Or, if you're using Yarn:

yarn install --production

### 6. **Use `pm2` to Run Build in the Background**
If you're SSH'd into your EC2 instance and don't want to wait for the build to complete, you can run it in the background using `pm2`:

pm2 start npm --name "vue-build" -- run build

This will allow you to close your SSH session while the build continues.

### 7. **Check Network Latency**
If you're pulling dependencies during the build, network latency can be a factor. You can use a local npm mirror to speed up package downloads:

npm config set registry https://registry.npm.taobao.org

### 8. **Optimize Docker Build (if using Docker)**
If you're running the build inside a Docker container, consider the following optimizations in your Dockerfile:

# Dockerfile
   FROM node:21 as builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install --production
   COPY . .
   RUN npm run build

   FROM nginx:alpine
   COPY --from=builder /app/dist /usr/share/nginx/html

Using a multi-stage build like this can reduce the final image size and speed up the build process.

### 9. **Monitor Build Performance**
Use tools like `time` to monitor how long the build process is taking and identify bottlenecks:

time npm run build

### 10. **Consider Using a CI/CD Pipeline**
Offload the build process to a CI/CD pipeline (like Bitbucket Pipelines, GitHub Actions, or GitLab CI) instead of running it on your EC2 instance. This can save resources and time on your EC2 instance.

By following these optimizations, you should be able to significantly reduce the build time of your Vue.js application on your AWS EC2 instance.