(Mac)nginx部署前端项目到服务器小白教程

一、连接服务器

在终端用ssh连接服务器

ssh [email protected]
//root为用户名

二、在服务器上下载nginx并修改配置文件

sudo apt install nginx

(Mac)nginx部署前端项目到服务器小白教程_第1张图片

二、打包vue项目并上传到服务器

1、开发生成静态部署文件:

npm run build

我这里是有两个项目,所以一起放到一个文件夹上传服务器
(Mac)nginx部署前端项目到服务器小白教程_第2张图片

2、上传到服务器

scp -p -r /usr/local/xzs/web [email protected]:/root/www/html
//本地的地址到服务器要放的文件夹

这里有一个坑,把文件放到服务器的root文件夹,报500错误。
后来发现是 Nginx 访问不了 dist 文件夹,权限的问题,把 dist 放在了 /root 目录下面,但 Nginx 不能访问 /root。之后将 web 放在 /var 目录下,问题就解决了
上传到腾讯云遇到权限问题:
(Mac)nginx部署前端项目到服务器小白教程_第3张图片
在进行传输的时候,可以先把文件放到tmp文件目录下,然后在进行mv 或者scp到其他目录,即可。

常用命令:
移动文件: mv /root/www/html/web /var/www/html/
执行mv命令的用户对该文件夹没有写权限/var/www/html
可以用 sudo mv /root/www/html/web /var/www/html/
查看文件夹中文件: ls
将一个名为abc的文件重命名为1234: mv abc 1234

三、在服务器上下载nginx并修改配置文件

1、在服务器中下载nginx

2、修改配置文件

修改nginx.conf

位置在 /usr/local/etc/nginx
(Mac)nginx部署前端项目到服务器小白教程_第4张图片

3、将本地的nginx.conf文件上传到服务器

scp -p -r /usr/local/etc/nginx/nginx.conf [email protected]:/tmp

4、在服务器上重启ngnix

(Mac)nginx部署前端项目到服务器小白教程_第5张图片
解决办法:
在这里插入图片描述

四、访问页面

(Mac)nginx部署前端项目到服务器小白教程_第6张图片

你可能感兴趣的:(前端,nginx,前端)