Có rất nhiều khóa học và bài báo nói về viết mã nhưng lại ít nói về cách triển khai dự án vào sản xuất. Tôi rơi vào tình huống phải đưa một dự án vào sản xuất, vì tôi là một nhà phát triển mới nên tôi cảm thấy khó khăn. May mắn thay, chúng tôi có google hỗ trợ và tôi đã thấy một vài hướng dẫn về các vấn đề của mình. Tôi đã làm theo hướng dẫn của họ nhưng mọi thứ đã đi chệch hướng về phía tôi, tôi không biết tại sao, điều tương tự cũng xảy ra với các hướng dẫn khác. Vì không có cái nào hiệu quả nên tôi đã nghĩ ra các hướng dẫn của riêng mình từ ý tưởng của họ để đưa dự án của tôi vào sản xuất. Dưới đây tôi sẽ thảo luận về cách suy nghĩ phù hợp với tôi.
Tuyên bố miễn trừ trách nhiệm: Hướng dẫn bên dưới này hoạt động 100% trên một dự án mà tôi đã triển khai. Điều này có thể không hoạt động chính xác trên dự án của bạn nhưng tôi ít nhất là bạn có ý tưởng về cách làm cho nó hoạt động về phía bạn.
điều kiện tiên quyết:
Bạn phải có một ngăn xếp LAMP được định cấu hình đúng trên máy chủ của mình. Bạn cần có quyền truy cập root hoặc quyền sudo trên máy chủ. Chi tiết kỹ thuật:
PHP 7.3.28 MYSQL 8.0.25 NODE 13.14.0 COMPOSER 2.0.14 CÀI ĐẶT LARAVEL (BACKOFFICE)
BƯỚC 1: Sao chép dự án của bạn vào thư mục đã chỉ định và cài đặt trình soạn thảo
1 2 3 4 | $ cd /var/www/backoffice $ git clone https://github.com/laravel/laravel.git . $ composer install --ignore-platform-reqs |
BƯỚC 2: Trong thư mục gốc của dự án, bạn sẽ thấy tệp .env.example. Sao chép và đặt tên là .env và tạo khóa mới
1 2 3 | $ cp .env.example .env $ php artisan key:generate |
BƯỚC 3: Cập nhật nội dung .env theo yêu cầu của bạn
1 2 3 4 5 6 7 8 | APP_NAME=ProjectName APP_ENV = production APP_DEBUG = false APP_URL=full_url_of_your_website |
BƯỚC 4: Chúng tôi cũng phải tạo và di chuyển cơ sở dữ liệu của bạn. Đảm bảo rằng các biến môi trường trong tệp .env của bạn khớp với thông tin đăng nhập cơ sở dữ liệu của bạn
1 2 3 4 5 6 7 8 9 10 11 12 | DB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=password |
BƯỚC 5: Bạn có thể cần lưu vào bộ đệm và liên kết bộ lưu trữ của mình với thư mục chung, trong loại lệnh:
1 2 3 | $ php artisan config:cache $ php artisan storage:link |
CÀI ĐẶT VUEJS (FRONTOFFICE)
BƯỚC 1: Sao chép dự án của bạn vào thư mục được chỉ định và cài đặt npm
1 2 3 4 | $ cd /var/www/frontoffice $ git clone https://github.com/laravel/laravelfront.git . $ npm install |
BƯỚC 2: Cập nhật tệp .env theo yêu cầu của bạn.
Lưu ý: Điều này chỉ áp dụng nếu bạn có các biến này trên bộ định tuyến làm url cơ sở và các giá trị dựa trên thiết lập máy chủ ảo của bạn.
1 2 3 | VUE_APP_API_URL=https://MYSITE.COM:8080/api/v1/ VUE_APP_STORAGE_URL=https://MYSITE.COM:8080/ |
BƯỚC 3: Khi mọi thứ đã sẵn sàng, hãy biên dịch dự án của bạn bằng cách chạy lệnh:
$ npm run build
Lưu ý: Thao tác này sẽ tạo tên thư mục mới DIST, thư mục này sẽ được sử dụng làm gốc tài liệu của bạn theo các bước sau đây.
THIẾT LẬP MÁY CHỦ ẢO
Trong phần này, chúng ta có hai lựa chọn vì chúng ta có các dự án: laravel làm backoffice và vuejs làm frontoffice. Chúng tôi có thể tạo từng dự án máy chủ ảo của riêng họ. Để đơn giản, chúng tôi sẽ chỉ tạo 1 vhost, đó là những gì tôi đã làm để triển khai dự án laravel+vuejs. Dưới đây là khối máy chủ mẫu của một vhost. Chúng tôi sẽ sửa đổi điều này theo yêu cầu của chúng tôi.
1 2 3 4 5 6 7 | < VirtualHost *:80 > ServerAdmin webmaster@localhost DocumentRoot /var/www/html/public ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined < / VirtualHost > |
THÔNG BÁO: Theo mặc định, apache có một tệp cấu hình có tên 000-default.conf đã được thiết lập và chạy, tệp này có thể được tìm thấy trong /etc/apache2/sites-available/
BƯỚC 1: Tạo tệp máy chủ ảo cho dự án của bạn bằng cách sao chép tệp mặc định của apache.
$ sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/my-server.conf
BƯỚC 2: Sửa đổi khối máy chủ theo yêu cầu của bạn
$ sudo nano /etc/apache2/sites-available/my-server.conf
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | Listen 80 Listen 8080 < VirtualHost *:80 > ServerName servernamehere.com DocumentRoot /path/to/frontoffice/dist/ FallbackResource /index.html AllowOverride All ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined < / VirtualHost > < VirtualHost *:8080 > DocumentRoot /path/to/backoffice/public/ Options Indexes FollowSymLinks MultiViews AllowOverride All Order allow,deny allow from all Require all granted ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined < / VirtualHost > |
BƯỚC 3: Kích hoạt vhost đã tạo và khởi động lại apache
1 2 3 4 | $ sudo a2ensite my-server.conf $ sudo systemctl restart apache2 |
THÔNG BÁO: Sau khi khởi động lại máy chủ Apache, bạn sẽ có thể truy cập dự án Laravel + Vuejs của mình trong trình duyệt.
GHI CHÚ CUỐI CÙNG
Như vậy là đến đây, bạn đã học cách triển khai laravel backoffice với vuejs làm frontoffice trên máy chủ linux. Cũng như cách chỉnh file vertualHost. Điều này có thể không hoạt động với bạn nếu bạn có một thiết lập khác được thực hiện đặc biệt trên vuejs/frontoffice. Trong vuejs của tôi, tôi có tệp .env định hướng tuyến đường đến văn phòng hỗ trợ của tôi. Vui lòng để lại nhận xét bên dưới nếu bạn có một số thông tin đầu vào để chia sẻ hoặc câu hỏi mà bạn không hiểu. Cảm ơn bạn và mã hóa hạnh phúc.
tham khảo: https://urgence-web.com/blog/deploy-laravel-vuejs-project-with-apache-and-linux-server