Linux服务器部署前端项目到外网访问

在这里插入图片描述

Linux服务器端安装Nginx

1、下载:

$ wget http://nginx.org/download/nginx-1.13.6.tar.gz

2、解压缩

$ tar -zvxf nginx-1.13.6.tar.gz

$ cd nginx-1.13.6

3、安装:

$ ./configure

$ make

$ make install

4、nginx前端项目代理地址配置

在cd /usr/local/nginx/conf目录下配置nginx.conf文件只要修改root即可,(root为项目打包后文件的存放路径。),服务器端前端项目路径:/data/htdocs/website

$ cd /usr/local/nginx/conf

$ vim nginx.conf //进入编辑模式

修改配置代码如下

在这里插入图片描述

退出编辑模式:按 esc

:wq 保存并退出 或者 :wq! 强制保存并退出

4、启动程序:

$ cd /usr/local/nginx/sbin/

$ ./nginx

其他命令:

5、停止Nginx

$ ./nginx -s stop

6、查看运行状态

$ ps aux | grep nginx

7、检查配置文件是否正确

$ ./nginx –t

8、查看nginx版本

$ ./nginx -v

9、配置文件位置

$ /usr/local/nginx/conf/nginx.conf

10、查看当前目录

$ pwd

安装遇到的问题:

如提示错误信息:make: *** No rule to make target build', needed bydefault’. Stop.

解决Centos7 解决安装Nginx编辑make && make install的不成功
解决方案

1、安装下面配置

$ yum -y install make zlib-devel gcc-c++ libtool openssl openssl-devel

2、重新configure

$ ./configure

3、编译

$ make && make install

另附项目官网访问地址,感谢您的关注。

官网访问地址

修改配置文件可能遇到的问题记录:

  1. 修改配置文件保存时报错: E45: ‘readonly’ option is set (add ! to override) , 可执行 :wq! 命令强制保存并退出
你可以按照以下步骤在 Linux 服务器上部署前端项目: 1. 安装必要的软件和工具: - 安装 Node.js:可以从 Node.js 官方网站下载并按照它们的指南进行安装。 - 安装 Git:使用包管理工具(如 apt、yum 等)安装 Git。 2. 克隆前端代码仓库: - 使用 Git 命令克隆前端项目的代码仓库到服务器上的目标位置。例如,使用以下命令克隆代码库: ``` git clone <代码仓库URL> ``` - 进入项目目录: ``` cd <项目目录> ``` 3. 安装项目依赖项: - 使用 npm(Node.js 的包管理器)安装项目所需的依赖项。运行以下命令: ``` npm install ``` 4. 构建前端项目: - 执行构建命令来编译和构建前端项目。具体命令与项目工具和框架有关,通常是 `npm run build` 或类似的命令。这将生成一个用于生产环境的优化版本的前端文件。 5. 配置 Web 服务器: - 根据你使用的 Web 服务器软件,配置服务器以提供前端文件。一般来说,你需要将服务器的根目录配置为编译后的前端项目的目录。 6. 启动 Web 服务器: - 启动 Web 服务器并确保它监听正确的端口。你可以使用命令行启动服务器,也可以使用守护进程管理工具(如 systemd、pm2 等)来管理 Web 服务器的生命周期。 7. 验证部署: - 使用浏览器访问服务器的 IP 地址或域名,并确认前端项目能够正常加载和运行。 这些步骤提供了一个基本的指南来在 Linux 服务器上部署前端项目。具体的步骤可能会因项目的工具和框架而有所不同,所以请根据你的项目需求进行相应的调整。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值