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

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

安装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 修改配置


相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
12月前
|
弹性计算 人工智能 前端开发
在阿里云ECS上部署n8n自动化工作流:U2实例实战
本文介绍如何在阿里云ECS的u2i/u2a实例上部署开源工作流自动化平台n8n,利用Docker快速搭建并配置定时任务,实现如每日抓取MuleRun新AI Agent并推送通知等自动化流程。内容涵盖环境准备、安全组设置、实战案例与优化建议,助力高效构建低维护成本的自动化系统。
2428 5
|
Java Linux Apache
在CentOS服务器上编译并部署NiFi源码
部署Apache NiFi在CentOS上是一个涉及细节的过程,需要注意Java环境、源码编译、配置调整等多个方面。遵循上述步骤,可以在CentOS服务器上成功部署和配置Apache NiFi,从而高效地处理和分发数据。
373 17
|
Shell 网络安全 开发工具
服务器已经搭建好的项目如何关联至gitee对应仓库并且将服务器的项目代码推送至gitee-优雅草卓伊凡
服务器已经搭建好的项目如何关联至gitee对应仓库并且将服务器的项目代码推送至gitee-优雅草卓伊凡
763 5
|
弹性计算 安全 Linux
使用阿里云服务器安装Z-Blog博客网站流程,新手一键部署教程
本教程教你如何在阿里云99元服务器上,通过宝塔Linux面板一键部署Z-Blog博客。基于CentOS 7.9系统,从远程连接、安装宝塔面板、开放端口到部署Z-Blog全流程详解,操作简单,新手也能轻松搭建个人博客网站。
1342 13
|
弹性计算 Devops Shell
用阿里云 DevOps Flow 实现 ECS 部署自动化:从准备到落地的完整指南
阿里云 DevOps Flow 是一款助力开发者实现自动化部署的高效工具,支持代码流水线构建、测试与部署至ECS实例,显著提升交付效率与稳定性。本文详解如何通过 Flow 自动部署 Bash 脚本至 ECS,涵盖环境准备、流水线搭建、源码接入、部署流程设计及结果验证,助你快速上手云上自动化运维。
1034 0
监控 安全 Linux
711 0
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
658 13
|
监控 Java Linux
Apache NiFi项目的编译与部署于CentOS服务器
总而言之,Apache NiFi的编译和部署虽然涉及多个步骤,但这些操作步骤简明扼要,即使是不太熟悉Java或Maven的用户也能跟随指南完成。通过遵循上述步骤,您将能够在CentOS服务器上成功部署Apache NiFi,为您的数据流处理任务建立一个功能强大的平台。
640 16

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1446
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    717
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    578
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    582
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    671
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    852
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1675
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    400
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1385
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    690