一:通过nginx部署
我们默认linux服务器上已经安装好nginx环境,我将vue编译的dist文件夹放到了 /root/build/x-frontend-manage目录下
步骤一:编写nginx配置文件
找到nginx的安装目录,注意不是nginx软件包的存放目录,如下图所示
到conf目录下 执行vi nginx.conf
user root; # 此处需要修改为root
worker_processes 1;
pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 9999; # 此处改为vue程序启动的端口号
server_name 127.0.0.1; # 此处改为服务器所在的外网ip
root /root/build/x-frontend-manage/dist; # 此处改为vue编译后文件的存放路径
location / {
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://127.0.0.1:9088; # 此处改为vue程序启动的后端接口地址
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
步骤二:启动
配置文件改好后
执行
./nginx -s start 命令启动nginx。
当后续部署需要改动dist文件夹下的内容时,执行
./nginx -s reload 方式就可以了。
nginx启动后 ps -ef|grep nginx 可以看到有两个相关的nginx进程,说明nginx启动成功
此时需要检查nginx.conf文件中监听的端口号是否有通过防火墙,即可外网通过 ip+端口号的方式访问部署的vue项目了。
二:通过Apache部署
我们默认linux服务器上已经安装好Apache环境
步骤一:修改配置文件
需要修改两个配置文件,第一个是
/etc/httpd/conf下的httpd.conf文件
第二个是我们的自定义虚拟主机配置文件
① 文件一httpd.conf文件:
这个文件需要改的东西如下
# 第一处
Listen 9999 # 监听9999端口,如果此处已经配置了其他监听端口如Listen 8000,那么另起一行写Listen 9999,不要把之前的替换了
#第二处
<Directory /> #只改这一个Directory ,其他的<Directory "/var/www">什么的不用改,因为我的编译文件不放在/var/www这些目录下,改了没用
AllowOverride All # AllowOverride 的值改为All
Require all granted # Require all 的值改为granted
</Directory>
#第三处
<Files ".ht*">
Require all granted # Require all 的值改为granted
</Files>
#第四处,增加一行代码,将其他文件夹下的配置兼并过来
IncludeOptional sites-enabled/*.conf
②在/etc/httpd/sites-enabled目录下新增一个文件,文件名称自定义,文件类型以.conf结尾,文件内容如下
<VirtualHost *:9999> # 监听9999端口
DocumentRoot "/root/build/x-frontend-manage/dist" # 编译文件的存放路径,下同
ServerName www.abc.com #域名,此域名映射的是 前端项目,如151.25.86.1::9999,不是后端接口的域名,没有域名的些localhost就好了,
alias / /root/build/x-frontend-manage/dist/
<Directory "/root/build/x-frontend-manage/dist">
Allow from all
AllowOverride all
Require all granted
Options FollowSymLinks Indexes
Header set Access-Control-Allow-Origin *
</Directory>
</VirtualHost>
改好之后重启Apache,Apache常用的命令。
service httpd status (查看状态)
service httpd restart (重启)
service httpd stop (停止)。
启动之后访问项目有可能会出现403报错,根据提示适时执行以下命令,再重启,基本就好了
chmod 755 /root/build
chmod +x -R /root