- If using apache2, check the document root in your current domain configuration file. (/etc/apache2/sites-available/my-ssl.conf). For my-ssl.conf example, it is usually /var/www/my-ssl.ca/html
- Check apache2.conf (/etc/apache2) to ensure the document root directory is set as follow (* you can set Directory /var/www/html, but easier for other virtual host on the server if we just set /var/www)
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All // allow .htacess override
Require all granted
</Directory>
- Apache2 has default user www-data, group www-data, double check by using $ less /etc/passwd, check groups by using $cat /etc/group
- The key information is to realize that the web server will access vue js files && laravel php files using the www-data user to serve the application based on browser request
- A clean, independent group needs to be created for the current logged in user (with root permission) && www-data
- create a webdev group by using $sudo addgroup webdev. Add user to group by using sudo adduser www-data webdev. Then also add the current user to the webdev group adduser jxiang webdev
- Save all work, reboot OS for the newly created group to take effect. $sudo reboot
- Check if apache2 has restarted after reboot $ service apache2 status
- Restart apache2 if needed $service apache2 restart
- Change ownership of my-ssl.ca (/var/www/my-ssl.ca/) to current_user:webdev group. $chown user:webdev my-ssl.ca.
- Give current user rwx permission, other user in the group rx permission, an no permission for public. $chmod 750 my-ssl.ca
- Set group id : chmod g+s my-ssl.ca. When this is set any new folders or files created inside my-ssl.ca will autmoatically inheirt group webdev. When this takes effect , s will appear in for example drwxrws--- folder
- The default permission for ubnutu for a new folder is 755, or 750 inside a user's home folder, for a file is 644 or 640 insider a user's home folder. We do not want that
- To change it, we need to add ACL, this requires group id. $id www-data, to see webdev groupid
- $sudo setfacl -Rdm g:group_id:rx my-ssl.ca (Note setfacl requires sudo apt-get install acl)
- R is recursive, which means everything under that directory will have the rule applied to it.
d is default, which means for all future items created under that directory, have these rules apply by default. m is needed to add/modify rules. This command is to give future items created or copied to my-ssl.ca only read and execute permission (Caution, moved file will not obey this rule) When this has effect drwxr-x---+ a + will appear showing ACL has effect - use $getfacl folder to check if it is working. There should be default:user rwx, default:webdev:rw-
- For existing items use $sudo setfacl -Rm g:group_id:rx my-ssl.ca
- Remember, read permission for folder is the permission to open any files/folder, execute permission is to cd into folder, and write permission is to create any files/folder
- Remeber, read permission for file is to open a specific file, execute is to run file as an executable, and write is to change the content of file
- www-data user need read and execute permission of folder to go inside the folder to open files.
- www-data user only need read permission to execute PHP files as PHP myfile is basically letting PHP process it self to execute the file, the file it self only needs read permission. Execute permission is for executing file as executable where ./myfile. We give group read and execute permission for folder and files because we want group to have execute permission on folder.
- Now make sure your laravel application has been built. Meaning similar stuff has already been performed
- $ composer install
- $ cp .env.example .env
- // Generate laravel application key in .env file
- $ php artisan key:generate
- // Generate jwt key in .env file
- $ php artisan jwt:secret
- // Open .env file and fill in the following parameters
- $ vim .env
- // (Mandatory)Mail server info
- MAIL_DRIVER=
- MAIL_HOST=
- MAIL_PORT=
- MAIL_USERNAME=
- MAIL_PASSWORD=
- MAIL_ENCRYPTION=
- // Clears config file cache for config file to be updated
- $ php artisan config:clear
- // Clears application cache
- $ php artisan cache:clear
- // Adding tables to db (first time only)
- // Check config/dabase.php to ensure the credentials && database name for db is correct
- $ php artisan migrate
- $ php artisan db:seed
- copy laravel folder to /var/www/my-ssl.ca/
- you will see laravel folder has inherited user:group && ACL because it is being copied.
- Now $cp .htacess in /var/www/my-ssl.ca/laravel/public/ && $cp index.php in /var/www/my-ssl.ca/laravel/public/ to var/www/my-ssl.ca/html/
- $rm -rf public in /var/www/my-ssl.ca/laravel/
- $vim index.php in /var/www/my-ssl.ca/ and change the following places:
- require __DIR__.'/../<My_laravel_dir>/vendor/autoload.php';
$app = require_once __DIR__.'/../<My_laravel_dir>/bootstrap/app.php'; - The other thing about laravel is that it needs to have write permission to storage folder
- mk dir /home/laravel-storage, $chown user:webdev /home/laravel-storage, $chmod 770 /home/laravel-storage, $ chmod g+s /home/laravel-storage,
- $sudo setfacl -Rdm g:group_id:rwx laravel-storage
- Change permission of storage folder in /var/www/my-ssl.ca/laravel/storage to 770 . chmod -R 770 storage (MUST change all folder inside storage to be 770 as well thats well -R is used, if there is a problem , try chmod 770 -R on symlink location)
- We change it becasue for cp file, it will first check default acl(getfacl), if it passes, it will check its original chmod acl, both must satisfy. If chmod acl is less than default acl, chmod acl will stay the same, else chmod acl will change to default acl
- cp storage folder from /var/www/my-ssl.ca/laravel/storage to /home/laravel-storage/
- change permission of copied storage folder chmod -R 770 /home/laravel-storage/ (acl checks for both default acl and chmod, if chmod is bigger chomod changed to acl, if chmod smaller kept chmod)
- rm -rf storage folder in /var/www/my-ssl.ca/laravel/storage
- in /var/www/my-ssl.ca/laravel create symbolic ln -s /home/laravel-storage/storage /var/www/my-ssl.ca/laravel
- then we will have storage folder in /var/www/my-ssl.ca/laravel link to a storage folder in /home/laravel-storage/storage folder
- Laravel deployment also requires to set .env file APP_DEBUG to false, and change resources/views/welcome.blade.php to empty for security reasons
- https://www.blogger.com/u/2/blog/post/edit/2746942211977437381/2452806049843142848
- https://www.blogger.com/u/2/blog/post/edit/preview/2746942211977437381/2452806049843142848
- https://askubuntu.com/questions/600714/creating-a-symlink-from-one-folder-to-another-with-different-names
---------------------------------------------------------
Vue deployment 2022
Common knowledge:
what is vue.config.js publicPath
https://stackoverflow.com/questions/28846814/what-does-publicpath-in-webpack-do.
It is the path to assess build vue resource such as js and css.
It is specified in vue.config.js module.exports, and it will overwrite module.exports -> baseUrl.(baseUrl is deprectead)
Where you uploaded your bundled files. (absolute path, or relative to main HTML file)
Example: /assets/
Assumed you deployed the app at server root http://server/.
By using /assets/, the app will find webpack assets at: http://server/assets/. Under the hood, every urls that webpack encounters will be re-written to begin with "/assets/".
src="picture.jpg"Re-writes ➡src="/assets/picture.jpg"Accessed by: (
http://server/assets/picture.jpg)
--- hash mode (/#/ hash behind URL - easy)
1. Create a folder in /var/www/my-ssl.ca/html/vueapp/
2. Make sure vue.config.js -> publicPath : ''
3. Make sure vue router ' s setting, router/index.js or src/setting.js is hash mode.
4. npm install, npm run build. Copy everything from dist to /var/www/my-ssl.ca/html/vueapp
5. ensure user and group (www-data) is correct, and permission is 750.
-----History Mode----- (no hash# behind URL)
important). Make sure vue.config.js -> publicPath : ''
important. Make sure vue router ' s setting, router/index.js or src/setting.js is hash mode.
https://github.com/vuejs-templates/webpack/issues/310
- Now go to your vue folder, $npm install, $npm run build, then copy all files in dist folder to /var/www/my-ssl.ca/html
- Should all be working
2022:
From VueJs documentation:
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. (https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode)
So, all you need to do to enable history mode is add a catch-all route:
{ path: '*', name: 'catchAll', component: Home }https://github.com/vuejs-templates/webpack/issues/310
Legacy:
use
https://www.blogger.com/blog/post/edit/2746942211977437381/3877476791733983263
https://www.blogger.com/blog/post/edit/preview/2746942211977437381/3877476791733983263
********************************************************************]
// How to solve Vue-cli project refresh resulting laravel 404 page :
********************************************************************
In laravel-project/app/Exceptions/Handler , add the following:
https://www.blogger.com/blog/post/edit/preview/2746942211977437381/3877476791733983263
168
********************************************************************]
// How to solve Vue-cli project refresh resulting laravel 404 page :
********************************************************************
In laravel-project/app/Exceptions/Handler , add the following:
/**
* Render an exception into an HTTP response.
*
* @param \Illuminate\Http\Request $request
* @param \Exception $exception
* @return \Illuminate\Http\Response
*/
public function render($request, Exception $exception)
{
// Http not found exception //redirect to vue index.html file
if ( $this->isHttpException($exception) )
{
switch ($exception->getStatusCode())
{
// not found
case 404:
return redirect()->guest('/');
break;
// // internal error
// case '500':
// return redirect()->guest('/');
// break;
// default:
// return $this->renderHttpException($e);
// break;
}
}
}
********************************************************************
// Laravel CROS middleware (laravel-project/app/Http/Middleware/Cors.php
********************************************************************
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
// Allow CORS requests
return $next($request)
->header('Access-Control-Allow-Origin', '<Front_end_URL>')
->header('Access-Control-Allow-Headers',' *')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
}
}
No comments:
Post a Comment