使用阿里云服务器部署前端项目

简介: 使用阿里云服务器部署前端项目,完成后可通过服务器域名访问网页

安装npm

  1. 下载源码安装包

cd ~

wget https://nodejs.org/dist/v12.2.0/node-v12.2.0-linux-x64.tar.xz


  1. 解压并放入指定目录

tar -xf node-v12.2.0-linux-x64.tar.xz

mv node-v12.2.0-linux-x64 /usr/local/node


  1. 建立软连接

cd /usr/bin

ln -s /usr/local/node/bin/node node

ln -s /usr/local/node/bin/npm npm


  1. 切换淘宝镜像

npm config set registry https://registry.npm.taobao.org

验证 npm config get registry


通过cnpm使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

cd /usr/bin

ln -s /usr/local/node/bin/cnpm cnpm


安装Nginx

下载相关组件

wget http://nginx.org/download/nginx-1.10.2.tar.gz

wget http://www.openssl.org/source/openssl-fips-2.0.10.tar.gz

wget http://zlib.net/zlib-1.2.12.tar.gz

wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.40.tar.gz


安装 c++ 编译环境:apt-get install gcc-c++


安装openssl:

tar zxvf openssl-fips-2.0.10.tar.gz

cd openssl-fips-2.0.10

./config && make && make install

pcre安装

tar jxvf pcre-8.45.tar.bz2

cd pcre-8.45

./configure && make && make install


zlib安装

tar zxvf zlib-1.2.12.tar.gz

cd zlib-1.2.12

./configure && make && make install


nginx安装

tar zxvf nginx-1.10.2.tar.gz

cd nginx-1.10.2

./configure && make && make install


启动nginx:

输入 whereis nginx,显示 nginx: /usr/local/nginx


进入目录并启动

cd /usr/local/nginx

/usr/local/nginx/sbin/nginx


软连接 ln -s /usr/local/nginx/sbin/nginx nginx


进入Linux系统的图形界面,打开浏览器输入localhost会看到Welcome to nginx,说明 nginx 启动成功


附:nginx基本操作:

启动

/usr/local/nginx/sbin/nginx

停止/重启

/usr/local/nginx/sbin/nginx -s stop(quit、reload)

命令帮助

/usr/local/nginx/sbin/nginx -h

验证配置文件

/usr/local/nginx/sbin/nginx -t

配置文件

vim /usr/local/nginx/conf/nginx.conf


项目上线


新建 vue.config.js 文件,作为打包时 webpack 使用的一个配置项

module.exports = defineConfig({

 publicPath: '将要放入服务器的路径'

})

npm run build  打包生成线上能执行的代码,执行后会生成 dist 目录,存放打包的文件。dist目录里就是需要打包上线的代码。

/usr/local/nginx/conf/nginx.conf 修改配置


相关实践学习
2分钟自动化部署人生模拟器
本场景将带你借助云效流水线Flow实现人生模拟器小游戏的自动化部署
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2天前
|
域名解析 弹性计算 应用服务中间件
使用域名访问部署在ECS上的网站
使用域名访问部署在ECS上的网站
|
14天前
|
并行计算 前端开发 异构计算
告别服务器繁忙,云上部署DeepSeek
本文以 DeepSeek-R1-Distill-Qwen-32B-FP8 为例,向您介绍如何在GPU实例上使用容器来部署量化的 DeepSeek-R1 蒸馏模型。
|
1月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
122 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
17天前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
|
1天前
|
弹性计算 Ubuntu Linux
一键部署OpenWebUI+Ollama到阿里云ECS,轻松运行DeepSeek!(保姆级教程)
在当今数据驱动的时代,快速部署和管理大模型成为企业的关键需求。阿里云提供了一键部署OpenWebUI+Ollama的便捷方案,支持本地大模型运行和管理。用户也可以选择连接阿里云百炼的在线模型。
一键部署OpenWebUI+Ollama到阿里云ECS,轻松运行DeepSeek!(保姆级教程)
|
8天前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
39 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
25天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
162 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
14天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
47 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
5天前
|
人工智能 负载均衡 数据可视化
阿里云出手了,DeepSeek服务器拒绝繁忙,免费部署DeepSeek模型671B满血版
阿里云推出免费部署DeepSeek模型671B满血版服务,通过百炼大模型平台,用户无需编码,最快5分钟、最低0元即可完成部署。平台提供100万免费Token,支持DeepSeek-R1和DeepSeek-V3等多款模型调用,有效解决服务器繁忙问题。新手零基础也能轻松上手,享受高效稳定的API调用和自动弹性扩展功能。教程涵盖开通服务、获取API-KEY及配置Chatbox客户端等步骤,详细指引助您快速实现DeepSeek自由。
72 18
|
19天前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!

热门文章

最新文章

  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    17
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    33
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    39
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    95
  • 5
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    13
  • 6
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    47
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    85
  • 8
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    37
  • 9
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    159
  • 10
    详解智能编码在前端研发的创新应用
    122