如何在同一台服务器上部署分离的后端和前端

Question

我开发了一个项目，以Vuejs为前端，Laravel为后端api。在localhost中，它们运行在不同的端口。我应该如何在生产中部署它们？

Answer 1

当您为生产构建 Vue 应用程序时，所有相关文件都在该dist文件夹中。它不在任何端口上运行，而是由网络服务器（例如 Apache 或 Nginx）提供文件。对于laravel api，您通常可以public看到laravel 安装中的文件夹，而其他文件不能直接从网络访问。

我将假设您想在同一个域上部署 api 和前端。使其工作的最简单方法是为您的 api 指定一个特定的前缀。在下面的例子中，我/api对所有 api 请求使用前缀，因为这是 api 路由的默认值。其他任何内容都被视为对前端的请求。

您可以像下面这样设置文件夹结构。该public_html文件夹是通常在转到时加载的内容example.com，您可以通过添加test.txt包含一些内容的文件并转到example.com/test.txt. 该backend文件夹包含您的 Laravel 安装。该frontend文件夹包含dist运行后文件夹包含的所有内容npm run build。

/var
+-- /www
    +-- /vhosts
        +-- /example.com
            +-- public_html
        +-- /backend
        +-- /frontend

为了让一切正常工作，我们将删除该public_html文件夹并将其替换为backend/public.

cd /var/www/vhosts/example.com
rm -r public_html
ln -s ../backend/public public_html

当我们检查时example.com，我们现在应该看到我们可以使用example.com/api/someroute. 有几种方法可以让前端使用它，但为了便于部署，让我们创建一个指向 dist 文件夹的符号链接。

cd /var/www/vhosts/example.com/public_html
ln -s ../../frontend/dist app

如果您为 Vue 应用程序使用哈希模式并且不介意通过 访问应用程序example.com/app，我相信这就是您需要做的全部。否则，.htaccess如果您使用的是 Apache，则需要修改该文件，或者更改您正在使用的任何其他网络服务器的重写配置。我想这个.htaccess文件看起来像这样：

# We assume that the FollowSymLinks option is enabled in the main Apache configuration.
RewriteEngine On

# Rewrite anything that starts with `api` to the laravel index file
RewriteCond %{REQUEST_URI} ^/api
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

# Rewrite anything else to the frontend app
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ /app/index.html [L]